CSS是网页设计开发中不可或缺的一部分，它为网页元素提供了丰富的样式和动画效果。今天，我们来学习如何用CSS绘制一个五角星。

.star {
  position: relative;
  width: 0;
  height: 0;
  border-width: 30px 0 30px 50px;
  border-style: solid;
  border-color: transparent transparent transparent #f1c40f;
  transform: rotate(35deg);
}

.star:before, .star:after {
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  width: 0;
  height: 0;
  border-width: 30px 25px 0 25px;
  border-style: solid;
  border-color: #f1c40f transparent transparent transparent;
  transform: rotate(-35deg);
}

.star:after {
  top: -28px;
}

首先，我们给五角星设置了相对定位，然后定义了它的宽度和高度是0。接下来，我们使用边框属性来绘制五角星的形状。其中，上部分和下部分的边框宽度都为30px，左侧和右侧的边框宽度分别为0和50px。同时，我们使用了透明颜色，将其设置为三边，而将右侧的边框颜色设置为黄色，来形成五角星的形状。

然后，我们通过:before和:after伪元素来绘制五角星的中间部分。这里我们设置了它们的宽度和高度为0，使用边框来绘制它们的形状。其中，边框宽度为30px和25px的是上部分的伪元素，而边框宽度为0和25px的是下部分的伪元素。我们同样使用了透明颜色，并将一侧设置为黄色，来形成五角星的形状。

最后，我们通过旋转变换来调整五角星的位置和角度。通过这些CSS属性和伪元素，我们就可以轻松地在网页中绘制出一个漂亮的五角星了。