在纯前端布局中，经常遇到需要给某个容器某一个角添加特殊颜色标记的需求，例如卡片左上角显示一个实色小三角，或者步骤条当前项左侧有一个醒目色块。很多人第一反应是再放一个绝对定位的子元素，但其实只靠一个 DIV 配合 border 的相关属性就能完成。核心思路是利用 border 在交汇处斜向切分的渲染规则，以及透明边框的遮挡关系，把颜色精准限制在目标角上。
理解 border 绘制的底层原理
当一个元素的宽高为零、但设置了不同方向的 border-width 和 border-color 时，浏览器会把每一条边绘制成梯形，相邻两条边在角部以对角线分隔。比如上边是红色、左边是蓝色，那么左上角就会出现红蓝各占一半的斜角效果。如果某一边的颜色是 transparent，那一边的梯形就不可见，但它仍然占据布局空间并参与角的切分。正是这种斜向切分机制，让单个 DIV 可以模拟出特定角的颜色块。
进一步说，border 的宽度决定了梯形底边长度，而元素自身的 content 区域大小决定了梯形顶边。若把 DIV 的 width 和 height 都设成 0，所有边的顶边都缩为一个点，此时四个 border 会拼成一个由四个三角形组成的方块，每个三角形对应一个角。通过控制哪几条边的颜色为实色、哪几条为透明，以及各边宽度的比例，就能让某一个三角形单独显示出来，形成“特定角颜色”的视觉。
还有一个容易忽略的点：border-style 必须显式声明为 solid 或其他非 none 值，否则宽度再大也不会绘制。很多初学者写了 border-width 和 border-color 却看不到角块，就是因为漏了 border-style。在下面的示例中我们会统一使用 solid，并通过调整宽度比例来控制角的形状和大小。
仅用一个 DIV 实现左上角纯色块的代码方案
假设我们希望一个 DIV 的左上角出现一个 20px 大小的实色三角，其余部分完全透明，且不影响外部文档流。可以将元素本身尺寸归零，只给上边和左边设置宽度，并把上边颜色设为透明、左边设为目标色，这样左上角就会留下左边边框形成的直角三角形。示例代码如下：
.corner-mark {
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 0 20px;
border-color: transparent transparent transparent #ff5722;
}
上面代码中 border-width 的顺序是上、右、下、左，因此上边 20px、左边 20px，右边和下边为 0。border-color 同样按上右下左顺序，上边透明、左边为橙红色。因为右边和下边宽度为 0，不参与绘制，最终只剩左边和上边交汇出的左上三角，且由于上边透明，可见部分就是左边边框构成的等腰直角三角形。把这个 DIV 放在卡片容器内并绝对定位到左上角，就实现了单元素角标。
如果希望角块是直角朝外的方块而不是三角形，可以保留元素自身的宽高，例如设 width 为 0 但 height 为 40px，并只给左边加宽边框，此时左边框会显示为矩形而非三角。通过组合 width、height 与不同边的 border-width，能够在一个 DIV 内灵活调整角的形态，不需要借助伪元素或额外标签，也不会触发多层合成导致性能下降。
对比其他方案与适用边界
除了 border 方案，常见的特定角颜色实现还有两种：一是使用伪元素 ::before 或 ::after 画一个绝对定位的小块；二是用 linear-gradient 背景通过多重渐变硬切出角区。伪元素方案虽然语义清晰，但严格来说已经不是“仅用一个 DIV”，且增加了 DOM 树节点。渐变方案则依赖背景绘制，无法让角块超出元素盒子，也不能和 border 本身其他样式共存。
与之相比，纯 border 单 DIV 方案零额外节点、兼容性好到 IE8，且角块可以借助负 margin 或绝对定位稍微溢出容器，做出类似书签突角的效果。不过它的局限在于角块形状被限制在三角形或边框矩形内，不能做圆角或复杂曲线；若需要圆角角标，仍要回到伪元素加 border-radius 的思路。下表简单对比了三种方式：
| 方案 | 是否单DIV | 形状限制 | 兼容性 |
|---|---|---|---|
| border单DIV | 是 | 仅直线切角 | 极好 |
| 伪元素 | 否 | 任意 | IE9+ |
| 渐变背景 | 是 | 不可溢出 | IE10+ |
在实际项目中，如果设计稿只是要求一个尖角或直边角标，用 border 是最轻量的。若设计师后续改成圆角气泡，再重构为伪元素也不迟。理解 border 生成角的原理，还能帮你快速看懂别人写的纯 CSS 箭头代码，不至于被一堆 border-width 和 transparent 绕晕。掌握之后，单 DIV 角标会成为你布局工具箱里顺手的小技巧。
CSSborderdiv_corner修改时间：2026-08-17 21:12:26