怎样用 CSS 画三角形？如何显示小于 12px 的文字和真正的 1px 细线？
先理解原理和示例，再练习完整口述与追问。
回答要点
三角形可用零宽高元素的透明边框，或 clip-path: polygon()。部分浏览器设置有最小字号，小于 12px 可用 transform 缩放，但要兼顾可读性。高 DPR 屏幕的 1px 细线可用 0.5px 边框、伪元素 scale 或 box-shadow。
原理拆解
元素宽高为 0 时，四条边框在中心相交，每条边框都是一个三角形；把其他三边设为透明，就只显示一个三角形。clip-path 直接裁出多边形，更直观，也支持渐变背景和动画。
浏览器或用户可以设置最小字号（中文环境下的 Chrome 曾长期默认 12px），此时 font-size: 10px 可能仍按 12px 显示。transform: scale(0.833) 只缩放绘制结果，不改变布局占位，需要配合 transform-origin 和容器尺寸。
CSS 像素与设备像素的比值是 DPR，DPR 为 2 时 1px 边框会占 2 个物理像素，看起来偏粗。现代 iOS Safari 和多数浏览器支持 0.5px 边框；兼容性不确定时，用伪元素画 1px 线再 scaleY(0.5)。
示例与推演
.arrow-up { width: 0; height: 0; border: 8px solid transparent; border-bottom-color: #333; }
.arrow-modern { width: 16px; height: 8px; background: #333; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.hairline { position: relative; }
.hairline::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 1px; background: #ddd; transform: scaleY(0.5); transform-origin: 0 100%;
}
@media (min-resolution: 3dppx) { .hairline::after { transform: scaleY(0.333); } }
易错点
-webkit-text-size-adjust: none 已不能绕过桌面 Chrome 的最小字号；过小的文字违背可读性要求，应先和设计确认。scale 后的文字点击区域按缩放后的大小计算。
参考回答可直接练习口述
三角形我会用零宽高加透明边框，或者用 clip-path 的 polygon，更直观。小于 12px 的文字受浏览器最小字号限制时，可以用 transform scale 缩放，但它不改变布局占位，而且太小的字影响可读性。高清屏 1px 线可以直接用 0.5px 边框，兼容性不确定时用伪元素画 1px 再按 DPR 缩放。