纯css能画三角形、圆形等图形，核心是利用border交汇形成三角形（宽高为0，三边透明、一边实色），border-radius:50%仅在宽高相等时生成正圆，圆角三角形需匹配border宽度与border-radius值，五角星需伪元素+transform组合实现。
纯 CSS 能画出三角形、圆形、半圆、圆角三角形甚至五角星，但必须理解 border 和 border-radius 的真实行为——它们不是“绘图工具”，而是盒模型边框的视觉延伸与裁切结果。
border 绘制三角形：width/height 为 0 是硬性前提
用 border 画三角形本质是利用边框交汇点形成的斜边视觉。只要元素 width 和 height 都为 0，四个方向的边框就会在中心点交汇，此时把三边设为 transparent，留一边有色，就出现三角形。
- 向上三角形：设
border-bottom为实色，border-left/border-right为transparent - 向右三角形：设
border-left为实色，border-top/border-bottom为transparent - 边框宽度直接决定三角形大小，比如
border-bottom: 20px solid red→ 底边高 20px - 别给元素加
padding或内容，否则会撑开尺寸，破坏交汇点
border-radius: 50% 不等于“画圆”，它依赖宽高比
border-radius: 50% 是按元素自身宽度算水平半径、高度算垂直半径。它不会“强制变圆”，只是把每个角按比例圆化。
- 正圆唯一条件：
width===height+border-radius: 50% - 宽高不等 → 椭圆，这是规范行为，不是 bug
-
border-radius: 999px在小容器里会被浏览器截断，不如50%可靠 -
元素加圆角失败？必须显式设
width和height，且推荐加display: block和object-fit: cover
圆角三角形：border-radius 值要匹配对应边框宽度
想给三角形加圆角，不能随便写个 border-radius: 10px —— 它只对有实际边框的角生效，而且圆角半径不能超过该边框的宽度，否则被截断。
- 例如一个底边为
border-bottom: 60px solid blue的向上三角形，最多只能设border-radius: 60px 60px 0 0 - 四值写法顺序是左上、右上、右下、左下，对应三角形三个角+底边两个端点
- 若三角形由
border-left和border-right构成（如箭头），圆角应作用于左右两侧的顶部，即border-radius: 0 0 30px 30px - 旧版 Safari 对此类组合支持不稳定，建议加
overflow: hidden到父容器兜底
半圆和多边形：单边 radius + overflow 或 clip-path 更可控
靠 border-radius 单独实现半圆容易偏移或裁不干净，尤其在响应式场景下。
- 水平半圆（左/右）：设
width和height不等，再只给一侧两个角设大 radius，另一侧设0，如border-top-left-radius: 100px; border-bottom-left-radius: 100px; - 上下半圆：更稳妥用
clip-path: inset(50% 0 0 0)（上半圆）或配合overflow: hidden+ 偏移子元素 - 五角星这类复杂图形，
border只能拆解为多个三角形，必须用::before/::after+transform: rotate()定位，误差常出现在角度和偏移量上 - 如果图形需要缩放不失真或精确路径，直接上
<svg></svg>，CSS 方案本质是“视觉模拟”，不是矢量绘制
真正难的不是写出第一个三角形，而是当它在 flex 容器里错位、在 retina 屏上发虚、或者被父级 transform 干扰时，知道该去查哪一层的渲染逻辑。border 和 border-radius 的行为始终绑定在盒模型上，脱离尺寸谈形状，十有八九会栽在边界条件里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
