[分享]css做五角星

CSS是一种用于设计网页样式的语言，它可以实现各种各样的效果，例如五角星。下面我们来看看如何用CSS做一个五角星。.star { width: 0; height: 0; borderleft: 40...

CSS是一种用于设计网页样式的语言，它可以实现各种各样的效果，例如五角星。下面我们来看看如何用CSS做一个五角星。

.star {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 70px solid yellow;
    position: relative;
}

.star:before {
    content: "";
    position: absolute;
    top: -48px;
    left: -22px;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 70px solid yellow;
    transform: rotate(36deg);
}

.star:after {
    content: "";
    position: absolute;
    top: -48px;
    left: -18px;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 70px solid yellow;
    transform: rotate(-36deg);
}

.star.yellow {
    border-bottom-color: yellow;
}

.star.red {
    border-bottom-color: red;
} 

代码解析：

首先定义了一个.star的类，设置了它的宽度和高度为0，即不可见。接着设置了三条边框，使用了透明色，形成一个三角形。因为五角星是由五个三角形组成的，所以需要定义一个伪元素:before和一个伪元素:after，分别对应五角星左上和右上的两个三角形。

接下来，需要旋转伪元素来形成五角星，这里做法比较巧妙，先偏移三角形位置，再旋转。最后，通过.star.yellow和.star.red类，可以分别设置五角星为黄色和红色。

使用这个CSS样式，可以轻松地画出各种颜色的五角星。大家可以自行尝试调整参数，来实现不同大小、不同形状的五角星效果。