
引言
在前端开发中,经常需要绘制一些简单的图形元素,如箭头、气泡角标等。过去常用的方法是使用 PNG 图片,但这种方式在响应式设计和颜色调整上存在局限。本文将介绍如何利用 CSS 的 border 属性和 border-radius 属性来绘制圆形、椭圆及三角形等图形,无需加载额外图片资源。
核心原理
浏览器渲染边框时,四个方向的边框在角上是斜切拼接的。当元素的宽高设为 0 时,通过设置不同方向和颜色的边框,可以形成三角形或其他几何形状。这是所有 CSS 图形魔法的基础。
/* 基础示例:展示边框拼接效果 */
.geometry-reveal {
width: 100px;
height: 100px;
border-top: 40px solid #FF6B6B;
border-right: 40px solid #4ECDC4;
border-bottom: 40px solid #45B7D1;
border-left: 40px solid #96CEB4;
background: transparent;
}
将宽高设为 0 后,四个边框会汇聚成三角形组合。若将其中三个边框设为透明,剩下的即为一个三角形。
/* 见证奇迹的时刻 */
.magic-zero {
width: 0;
height: 0;
border-top: 50px solid #FF6B6B;
border-right: 50px solid #4ECDC4;
border-bottom: 50px solid #45B7D1;
border-left: solid ;
}


