最省事的是用clip-path: polygon()一行CSS绘制五角星，需设置宽高和背景色，坐标序列已归一化（如50% 0%, 61.8% 35.2%…），兼容Chrome 55+、Firefox 54+、Safari 15.4+；SVG更精准但需额外标签，IE11需伪元素叠加法。
直接用 clip-path 最省事，兼容性够用（Chrome 55+、Firefox 54+、Safari 15.4+），不需要额外 DOM 或 SVG，一行 CSS 就能画出标准五角星。
用 clip-path: polygon() 画五角星
五角星本质是 10 个顶点的星形多边形（5 个外顶点 + 5 个内顶点），但不用手算坐标——用预设好的 polygon() 值即可。主流方案是基于单位圆推导的 10 点坐标，缩放后适配任意尺寸容器：
div.star {
width: 100px;
height: 100px;
background: #ff6b35;
clip-path: polygon(
50% 0%,
61.8% 35.2%,
97.1% 35.2%,
69.1% 57.6%,
80.9% 92.8%,
50% 70.4%,
19.1% 92.8%,
30.9% 57.6%,
1.9% 35.2%,
38.2% 35.2%
);
}
这个坐标序列已归一化，直接复制粘贴就能用。注意：clip-path 作用在块级元素上，必须有明确宽高，否则可能不可见。
transform + 伪元素叠加法（兼容 IE11）
如果项目仍需支持 IE11 或老版 Edge（clip-path 不支持），可用两个重叠的 ::before 和 ::after：一个正五边形，一个旋转 180° 的正五边形，交叠成星形。但严格来说这不是“单个五角星”，而是视觉合成：
- 先用
border技巧或transform: rotate()拼出正五边形轮廓 - 再让其中一个绕中心旋转 36°（不是 180°，五角星内角差是 36°）
- 两层叠加时需用
z-index控制层级，且背景色必须一致，否则边缘会漏底色
实际开发中极少真用这方法，因为维护成本高、响应式难调、阴影/描边行为异常——除非明确卡死在 IE11 环境。
为什么不用 svg？
SVG 当然能画得最精准，也支持描边、动画、响应式缩放，但问题在于：它需要额外标签、不能纯 CSS 控制、无法直接用在按钮背景或文字装饰里。如果你只是想给一个 button 加个五角星角标，硬塞 会破坏语义和布局流。这时候 clip-path 是更轻量的选择。
反过来说，如果需要交互（比如 hover 变色、点击反馈）、复杂动画（逐角点亮）、或导出为图标资源，那就该切回 SVG——别硬扛 CSS。
真正容易被忽略的是：五角星在 Retina 屏上用 clip-path 可能出现轻微锯齿，尤其小尺寸（≤20px）时。这不是 bug，是当前浏览器光栅化策略所致。解决办法只有两个：放大后再缩放（用 transform: scale(0.5) 配合 transform-origin），或者直接改用 SVG。别试图用 filter: blur(0.1px) 揉边——它会让整个元素模糊，得不偿失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
