嘿，各位技术探索者们！👋 咱们今天聊点轻松又酷炫的技术——纯 CSS 绘图！你没听错，不用 canvas，不靠 SVG，咱们就用最基础的 HTML 元素和 CSS 样式，也能画出各种意想不到的图形。这不仅能让你对 CSS 属性有更深入的理解，还能在日常开发中解决一些小图标、装饰图形的需求，简直是前端er的必备小技巧！
上面那段代码示例就是我们今天的“画板”，包含了三角形、扇形、箭头和椭圆等多种经典图形。下面，就让我们一起揭开这些图形背后的 CSS“魔法”吧！
1. 📐 神奇的三角形：利用边框交汇的特性
创建三角形，是我们利用 CSS 绘图最经典的案例之一，它巧妙地利用了元素边框（border）在角落交汇时形成的斜角这一特性。
来看示例中的 .triangle 类：
CSS
.triangle {
width: 5px;
height: 5px;
border: 10px solid transparent; /* 关键点1: 设置所有边框透明 */
border-top-color: red; /* 关键点2: 只设置需要显示的那条边框颜色 */
}
知识点深挖：border 的秘密
一个标准块级元素有上下左右四条边框。当元素的 width 和 height 都设置为 0 时，这四条边框会在中心点相交。由于边框的连接处是斜切的，它们会形成四个三角形区域。
-
设置宽高为 0：在示例中，虽然设置了
width: 5px; height: 5px;，但这只是为了让“边框”更小巧。在绘制标准的、尖锐的三角形时，我们通常会设置为width: 0; height: 0;。 -
利用透明边框：
- 通过
border: 10px solid transparent;将所有边框设置为透明，这样它们就不会显示颜色了。 - 接着，通过
border-top-color: red;只给需要的方向（例如顶部）设置颜色。 - 结果就是，只有顶部的红色边框与两侧透明边框相交形成的斜切面（三角形）被我们看见了！
- 通过
2. 🍕 独特的扇形和箭头：边框与圆角的组合拳
扇形和箭头是更进一步的造型，它们结合了边框和圆角 border-radius。
A. 扇形（.sector）—— 靠圆角裁剪
示例中的第一个扇形 .sector 是一种通过控制圆角来实现扇形的方法：
CSS
.sector {
width: 100px;
height: 100px;
border-radius: 100px 0 0; /* 关键点: 只对左上角设置圆角 */
background-color:#00f;
/* transform: rotate(45deg); */ /* 注释：可以通过旋转调整扇形方向 */
}
border-radius语法解析：border-radius: top-left top-right bottom-right bottom-left;border-radius: 100px 0 0;等价于border-radius: 100px 0 0 0;。它只让左上角拥有一个等于元素宽高的大半径（100px），这会把元素裁剪成一个四分之一圆，即一个扇形。
B. 箭头（.arrow）—— 边框斜切的二次应用
示例中的 .arrow 再次使用了边框斜切的原理，但这次结合了 transform: rotate()：
CSS
.arrow {
width: 10px;
height: 10px;
border: 1px solid #000;
border-bottom-color: transparent; /* 关键点: 隐藏底部边框 */
border-left-color: transparent; /* 关键点: 隐藏左侧边框 */
transform: rotate(45deg); /* 关键点: 旋转45度形成箭头形状 */
}
- 边框裁剪：通过设置
border-bottom-color: transparent;和border-left-color: transparent;，只留下上边和右边的黑色边框。 - 旋转成箭头：由于元素是正方形，两条相邻的边框交汇于一个尖角。
transform: rotate(45deg);将整个元素旋转 45 度，这个尖角就变成了向上指的箭头形状。
3. 🥚 优雅的椭圆：双值圆角的魅力
椭圆（或扁圆）的绘制展示了 border-radius 更高级的用法：斜杠分隔的双值语法。
CSS
.oval {
height: 50px;
width: 100px;
background-color: #ff0;
border-radius: 50px / 25px; /* 关键点: 使用斜杠分隔水平和垂直半径 */
}
知识点深挖：border-radius 的椭圆语法
-
标准语法：
border-radius: [水平半径] / [垂直半径]; -
实现椭圆：
border-radius: 50px / 25px;- 斜杠（
/）前面的值 (50px) 定义了所有角的水平半径（X轴）。 - 斜杠（
/）后面的值 (25px) 定义了所有角的垂直半径（Y轴）。
通过这种方式，我们让矩形（width: 100px; height: 50px;）的圆角有了不同的水平和垂直曲率，当水平半径等于宽度的一半，垂直半径等于高度的一半时（在本例中，100px / 2 = 50px，50px / 2 = 25px），矩形就被完美地渲染成一个椭圆形！
总结与展望
纯 CSS 绘图虽然在复杂的图形和动画方面不如 SVG 或 Canvas 强大，但在处理几何图形、箭头、图标背景等方面，它以其代码量小、易于维护、渲染速度快的优势，成为了一个非常有用的工具。
今天我们探索了：
- 三角形：利用
border的斜角特性和transparent颜色。 - 扇形：通过
border-radius的单角控制实现四分之一圆。 - 箭头：结合了边框斜角和
transform: rotate()。 - 椭圆：利用
border-radius的斜杠双值语法，分别控制水平和垂直半径。
怎么样？是不是觉得 CSS 也可以像一支神奇的画笔？🎉 赶紧去尝试画出你自己的 CSS 图形吧！
下一个挑战：你想了解如何用 CSS 绘制一颗爱心，或者一个五角星吗？告诉我，我们继续！👇
