css如何写五角星

前言

五角星作为一种常见的图形符号，常被用于表示顶级或重要的内容。在CSS中，我们可以通过一些技巧来实现绘制五角星的效果。本文将会介绍两种常见的实现方式。

方法一：使用伪类元素和border属性

首先，我们可以使用CSS的伪类元素和border属性来绘制五角星。

.star {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 15px solid #f1c40f;
  position: relative;
}

.star:before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 15px solid #f1c40f;
  transform: rotate(35deg);
}

.star:after {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 15px solid #f1c40f;
  transform: rotate(-35deg);
}

上述代码为一个名为"star"的CSS类，通过设置不同的伪类元素，实现了五角星的效果。通过调整border的宽度和颜色，可以修改五角星的大小和外观。

方法二：使用svg标签

另一种方法是使用SVG（可缩放矢量图形）标签来绘制五角星。SVG是一种基于XML的图像格式，常用于矢量图形的展示。

上述代码中，我们使用了一个多边形标签（polygon），通过设置points属性，定义了五角星的顶点坐标。通过调整坐标和填充颜色，可以修改五角星的大小和外观。

总结

以上介绍了两种常见的绘制五角星的方法。通过使用CSS的伪类元素和border属性，或者使用SVG标签，我们可以轻松地实现绘制五角星的效果。这些方法都非常灵活，可以根据具体需求进行调整和修改。希望这些示例能够帮助你在设计和开发中使用五角星图形。