css怎么写五角星

1. 简介

五角星是一种常见的图形，它在很多场合都得到了应用。在Web开发中，我们可以使用CSS来绘制五角星。要想实现这个效果，我们需要了解CSS的一些基本属性，如border、transform、rotate等。

2. CSS绘制五角星的方法

2.1 绘制实心五角星

首先，我们来看一下如何绘制一个实心的五角星。

.star {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid yellow;
  position: relative;
}
.star:before {
  content: "";
  position: absolute;
  top: -30px;
  left: -50px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid yellow;
  transform: rotate(35deg);
}
.star:after {
  content: "";
  position: absolute;
  top: -30px;
  left: 0px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid yellow;
  transform: rotate(-35deg);
}

在这段CSS代码中，我们使用了“伪元素”的概念。伪元素是CSS中的一种特殊的选择器，它能够在元素的前面或后面添加一些内容，而这些内容可以通过CSS样式来设置。

我们在.star类中定义了border属性，以及另外两个伪元素:before和:after。其中，border的三个值分别表示左边框、右边框和下边框的长度。由于我们需要绘制的是一个五角星，所以我们需要将它定义成一个类似于“菱形”的形状。为了让后面的三角形能够覆盖住前面的三角形，我们使用了“伪元素”。伪元素的before和after分别代表两个三角形，在它们上面设置了旋转角度，就能够形成我们需要的五角星。

最终的效果如下：

2.2 绘制空心五角星

接下来，我们来看一下如何绘制一个空心的五角星。

.star2 {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  transform: rotate(-35deg);
}
.star2:before,
.star2:after {
  content: "";
  width: 55%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 3px solid yellow;
  border-radius: 50%;
  box-sizing: border-box;
}
.star2:before {
  transform: rotate(35deg) skew(30deg);
}
.star2:after {
  transform: rotate(-35deg) skew(-30deg);
}

在这段CSS代码中，我们使用了“旋转”和“斜切”等属性。通过旋转和斜切两个伪元素，就能够实现一个空心的五角星了。

最终的效果如下：

3. 总结

通过以上两种方法，我们可以很容易地实现一个五角星。其中，实心五角星的绘制比较复杂，需要使用三个元素和两个伪元素来实现。而空心五角星则比较简单，只需要使用一个元素和两个伪元素就可以了。

以上的方法只是其中的两种，实际上还有很多其他的方法可以绘制五角星。希望大家能够善于发掘，创造更加独特的效果。