.star { display: inline-block; width: 0; height: 0; border-right: 15px solid transparent; border-bottom: 25px solid #f0e72c; border-left: 15px solid transparent; transform: rotate(35deg); } .star:before { content: ""; display: block; width: 0; height: 0; position: absolute; top: -13px; left: -15px; border-right: 15px solid transparent; border-bottom: 25px solid #f0e72c; border-left: 15px solid transparent; transform: rotate(-70deg); } .star:after { content: ""; display: block; width: 0; height: 0; position: absolute; top: -13px; left: 15px; border-right: 15px solid transparent; border-bottom: 25px solid #f0e72c; border-left: 15px solid transparent; transform: rotate(70deg); }
以上代码是制作一个星星所需要的CSS3代码。首先,大家需要使用border属性来绘制三角形,通过旋转来让三角形组成一个五角星形状。在使用:before和:after伪类来绘制其他部分,组成完整的星星效果。
接下来,大家可以使用以下代码来创建一堆星星:
以上代码将创建一个星星的容器,里面包含了5个星星元素,用class来调用大家刚刚写好的CSS3代码,从而使得这些元素都变成了美丽的星星。
在实际使用中,大家可以根据自己的需要,调整星星大小、颜色,甚至可以通过hover伪类来实现星星的动画效果,具体实现方式可以根据自己的创意进行调整。