用伪元素画三角形最稳妥，需设content、absolute定位及pointer-events:none；画圆/椭圆须配合显式宽高和border-radius；复杂图形优先用clip-path或SVG。
按钮里画三角形：用 border + 伪元素最稳妥
直接在 <button> 上设 width:0;height:0;border 会破坏按钮默认盒模型，导致点击区域异常或文字错位。正确做法是用 ::before 或 ::after 伪元素承载图形。
- 伪元素必须设
content:""，否则不渲染 - 要加
position: absolute，并配合button { position: relative }定位 - 方向控制靠边框颜色：比如向下箭头就只留
border-bottom有色，其余三边transparent - 别忘了给伪元素设
pointer-events: none，避免遮挡按钮点击
示例（按钮右侧加向右小箭头）：
.btn::after {<br> content: "";<br> position: absolute;<br> right: 12px;<br> top: 50%;<br> transform: translateY(-50%);<br> width: 0;<br> height: 0;<br> border-top: 6px solid transparent;<br> border-bottom: 6px solid transparent;<br> border-left: 8px solid #333;<br> pointer-events: none;<br>}
按钮上画圆/椭圆：border-radius 必须配合显式宽高
按钮本身是行内元素，默认 width 和 height 由内容撑开，border-radius: 50% 在这种情况下无效——它不是“画圆命令”，而是按当前宽高算半径。所以得先让按钮变成块级或内联块，并设固定尺寸。
- 推荐写法：
display: inline-block; width: 40px; height: 40px; border-radius: 50% - 如果按钮有文字，圆角只对背景生效，文字仍按矩形排布；想让文字也居中显示圆形区域，需加
line-height: 40px; text-align: center - 椭圆只需宽高不等：
width: 60px; height: 30px; border-radius: 30px / 15px（注意斜杠分隔 x/y 半径） - IE11 及更早版本不支持
border-radius百分比写法，可降级为具体像素值
复杂图形如五角星、菱形：优先用 clip-path 而非 border
border 绘图只适合三角形、梯形等简单形状，五角星、平行四边形这类需要精确角度和顶点坐标的图形，硬凑 border 会失控。现代浏览器（Chrome 55+、Firefox 47+、Safari 15.4+）支持 clip-path: polygon()，更可控、更语义化。
立即学习“前端免费学习笔记（深入）”；
- 五角星常用路径：
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%) - 菱形可简写为：
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) - 注意：
clip-path作用于整个元素，包括背景、边框、文字；若只想裁剪背景，应把图形单独抽成伪元素 - 旧浏览器 fallback 方案：用 SVG 内联或
<img src="star.svg">
性能与兼容性容易被忽略的点
伪元素绘图和 clip-path 都会触发重排重绘，尤其在 hover 动画中频繁使用时。但真正影响体验的不是“能不能画”，而是“怎么画才不卡”。
-
transform和opacity是仅有的两个能硬件加速的属性，动画尽量只改这两个，别动width/height/left/top -
clip-path在 Safari 中对polygon()的计算开销较大，超过 6 个点建议拆成多个元素或改用 SVG - 所有纯 CSS 图形都依赖盒模型尺寸，响应式场景下务必用
em或rem替代固定px，否则缩放后图形比例失真 - 按钮上的图形别太小——iOS Safari 对小于 8px 的伪元素渲染模糊，Android Chrome 有时会丢帧
实际项目里，图形越简单越可靠；真要画星形、心形、齿轮，SVG 是更稳的选择，CSS 只负责定位和状态切换。
