css中的五角星（css 五角星）

CSS中的五角星在设计中经常被用到，我们可以通过CSS样式来创建五角星。下面是一个简单的五角星CSS代码：

.star {
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-bottom: 30px solid #888888;
    border-left: 50px solid transparent;
    position: relative;
    top: -6px;
}
.star:before {
    content: "";
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-top: 30px solid #888888;
    border-left: 50px solid transparent;
    position: absolute;
    top: -24px;
    left: -50px;
}

通过以上CSS代码，我们就可以制作出一个五角星的形状，并且可以改变五角星的大小和颜色。

如果我们想要制作一个边框的五角星，我们可以使用CSS的伪元素:before和:after，代码如下：

.star {
    width: 0px;
    height: 0px;
    border-right: 50px solid transparent;
    border-bottom: 30px solid #888888;
    border-left: 50px solid transparent;
    position: relative;
    top: -6px;
}
.star:before {
    content:"";
    position:absolute;
    top:-29px;
    left:-51px;
    border-right:50px solid transparent;
    border-bottom:30px solid transparent;
    border-left:50px solid transparent;
    border-top:30px solid #888888;
    transform:rotate(134deg);
    transform-origin:0 0;
}
.star:after{
    content:"";
    position:absolute;
    top:-29px;
    left:1px;
    border-right:50px solid transparent;
    border-bottom:30px solid transparent;
    border-left:50px solid transparent;
    border-top:30px solid #888888;
    transform:rotate(44deg);
    transform-origin:0 0;
}
    

通过以上代码，我们可以轻松地制作出一个不同颜色和大小的边框五角星。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！