做下拉菜单的小箭头、聊天气泡的尖角，第一反应可能是切一张图片。其实纯 CSS 就能画，不用任何素材，改颜色改大小都只动几行代码。

经典写法：border 挤出三角形

原理是把元素的宽高设成 0，四条边框互相挤压，只给一条边上色，其余透明，css三角形就出来了。

.up { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 12px solid #333; }

border-bottom 有色，尖角朝上；换成 border-top 有色就朝下，朝左朝右同理。大小由两条透明边的像素决定，带颜色的那条决定高度，改数字就能缩放。

更直观的 clip-path

.tri { width: 20px; height: 16px; background: #333; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

polygon 的三个点分别是顶点、右下角、左下角，想换方向挪坐标就行，还能画直角三角形和任意多边形。老项目要兼容旧浏览器就用 border 方案，clip-path 在现代浏览器里都支持，IE 不行。

气泡框的实际组合

常见做法是圆角矩形加伪元素：::before 或 ::after 画一个 css三角形定位到底部，再叠一个错位的白色三角形盖住边框线，聊天软件的气泡就是这个思路。用伪元素画不用多加标签，样式也更集中，定位用 absolute，父级记得加 position:relative。

怎么选：颜色单一、尺寸固定，border 三五行搞定；要渐变、阴影、异形角，直接上 clip-path。平时把常用的几个方向存成代码片段，用的时候改改像素就行。