CSS 边框绘制圆形与三角形实战技巧
原理概述
在开发中,经常需要纯 CSS 绘制几何图形。浏览器渲染边框时,四个方向的边框在角上其实是斜着拼起来的,这为利用边框属性绘制图形提供了可能。
简单来说,给一个 div 设置四个不同颜色的边框,中间是空的,会看到四个梯形围成一个小方块。只要把宽高设为 0,再操控 border 的粗细和颜色,就能凭空变出三角形、梯形甚至平行四边形。
/* 基础示例:展示边框拼接效果 */
.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,四个等腰直角三角形会拼成一个正方形。此时若将其中三个边框的颜色改为 transparent,剩下的就是一个完美的三角形。
/* 见证奇迹的时刻 */
.magic-zero {
width: 0;
height: 0;
border-top: 50px solid #FF6B6B;
border-right: 50px solid #4ECDC4;
border-bottom: 50px solid #45B7D1;
border-left: 50px solid #96CEB4;
}
绘制圆形
想要正圆?直接 border-radius: 50%,只要容器是正方形,立马圆润起来。
/* 基础圆 */
{
: ;
: ;
: (, , );
: ;
}
{
: ;
: ;
: ;
: ;
}
{
: ;
: ;
: (to right, , );
: / ;
}


