使用css绘制五角星的方法-可定制颜色

mini云码 发布日期： 2025-11-10 01:58

我们平时开发之中，有些形状不一定需要图片来实现，用css即可实现很多不同的形状，下面这个五角星就是可以使用css来绘制，效果也非常不错哦。

.star {
    width: 60px;
    height: 60px;
    background: #faea8b;
    -webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);
    clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);
}
      

然后div引用这个css样式即可：

<div class="star"></div>

宽度和高度都可以自定义，比图片灵活多了。

css五角星效果：