HTML和CSS都是網頁制作領域必不可少的技術，它們可以讓我們實現豐富多彩的效果。今天，我們就來學習如何用HTML和CSS畫一個漂亮的五角星。

代碼如下：
HTML部分：
<div class="star"></div>
CSS部分：
.star {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #ff0;
border-left: 50px solid transparent;
position: relative;
}
.star:before {
content: "";
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #ff0;
border-left: 50px solid transparent;
position: absolute;
top: -20px;
left: -50px;
transform: rotate(35deg);
}
.star:after {
content: "";
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #ff0;
border-left: 50px solid transparent;
position: absolute;
top: -20px;
left: 0;
transform: rotate(-35deg);
}

我們先來看HTML部分，可以看出我們使用了一個div元素，并為它添加了一個類名為“star”。接下來，我們就需要在CSS部分中對這個div進行樣式設置了。

首先，我們設置div的寬度和高度都為0，這是為了方便我們用邊框進行繪制圖形。然后，我們對div的右邊框和左邊框以及底邊框進行了設置，這個時候，我們的div就變成了一個正三角形。

接下來，我們為div添加:before和:after偽元素，也就是在div內部添加了兩個三角形，用于構成五角星的芒。為了達到這個效果，我們還設置了這兩個元素的寬度和高度都為0，并對他們的右邊框和左邊框以及底邊框進行了設置，同時，我們還對它們進行了絕對定位，并使它們旋轉了一定的角度，最終，我們就得到了一顆漂亮的五角星。

通過這個小例子，我們可以體會到HTML和CSS的強大，它們可以讓我們輕松地實現各種效果。當然，這只是冰山一角，HTML和CSS還有更為豐富的用法，相信在未來的學習和實踐中，我們會逐漸揭開它們更多的神秘面紗。