纯css图形依赖盒模型边框与圆角规则而非绘图命令；三角形需width/height均为0，用透明边框组合实现；正圆要求宽高相等且border-radius:50%；圆角三角形宜用clip-path或双层遮罩。
纯 CSS 能画三角形、圆形这些图形，但不是靠“绘图命令”，而是靠盒模型的边框行为和圆角裁切规则。理解这点，才能避开一堆莫名其妙的错位和变形。
border 绘制三角形必须 width 和 height 都为 0
这是硬性前提，不是可选项。只要 width 或 height 有一个非零，四个边框交汇点就不再是单个点，而是一个矩形区域，三角形就塌了。
-
width: 0; height: 0;是起点，缺一不可 - 向上三角形：设
border-bottom为实色，border-top/border-left/border-right全部transparent - 向右三角形：设
border-left实色，其余三边transparent - 边框宽度直接决定三角形大小，比如
border-bottom: 24px solid #333→ 底边高 24px - 别加
padding、文字内容或伪元素内容，否则会撑开尺寸，破坏交汇点
border-radius: 50% 不等于“画圆”，它依赖宽高比
border-radius: 50% 是按当前元素的 width 算水平半径、height 算垂直半径。它不会强行把矩形拉成圆，只是把四个角各自按比例圆化。
- 要正圆：必须
width===height，比如width: 80px; height: 80px; - 宽高不等 → 得到椭圆，不是 bug，是设计行为
- 背景色用
background-color，不是border；border会额外增加尺寸，干扰圆角计算 - 如果容器本身有 margin/padding/border，记得用
box-sizing: border-box控制总尺寸
圆角三角形需要同时匹配 border 宽度与 border-radius 值
纯 border 三角形是尖角，想让它带圆角，不能只加 border-radius——因为元素本身没有内容区，border-radius 对边框交汇点无效。得换思路：
- 用
clip-path: polygon()裁出三角形轮廓，再给容器设border-radius（对容器生效） - 或用两个重叠的
div：底层是普通三角形，上层是略小的、带border-radius的遮罩 - 更稳妥的做法是改用
svg或clip-path，避免在不同浏览器里因border渲染差异导致圆角错位 - 注意：某些旧版 Safari 对
clip-path的polygon()支持不完整，需加-webkit-clip-path
真正容易被忽略的是：所有这些“图形”都不是独立绘制对象，而是盒模型副作用。一旦父容器缩放、flex 布局干扰、或用了 transform: scale()，边框交汇点和圆角计算都会偏移。调试时优先检查盒尺寸是否真为 0，以及有没有隐式 padding 或 line-height 在起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
