本文共 1082 字，大约阅读时间需要 3 分钟。

用CSS绘制三角形

在CSS中绘制三角形可以通过设置边框的方式实现，这是一种简洁且灵活的方法。以下是详细说明以及实用示例。

三角形的方向可以通过调整边框的设置来实现，这一点需要注意：与你设置的方向相反。例如，如果你想绘制一个顶部向下的三角形，可以尝试如下设置：

div {    width: 0;    height: 0;    border: 10px solid transparent;    border-top-color: #00BCD4;    border-bottom-color: transparent;    border-left-color: transparent;    border-right-color: transparent;    position: relative;}

1. "border-top-color"属性决定了三角形的颜色，默认是黑色2. "border: 10px solid transparent""> - 长度（width和height）决定了三角形的大小，默认为0绘制一个点 - "solid"表示边框作为实线 - "transparent"表示边框透明，因此看不到边框，只能通过边框的顶点和底下的空白来形成三角形3. 可以通过调整边框的属性（例如，"border-top"、"border-bottom"等），以实现不同方向的三角形。如果想绘制底端朝上的三角形，只需将"border-top-color"改为透明色，而把"border-bottom-color"设置为你想要的颜色4. 通常， Triangles 可以用于 web 设计 中的 numerous 应用，包括 button 导航、视觉分隔线和 icon 等

示例代码：

运行效果 foe查看请参考[截图](https://img-blog.csdnimg.cn/20200909170555125.png) 或者将实际路径替换进去

更详细的步骤说明：

建议： CSS 三角形绘制法适用于需要简单形状的场景，可以通过修改 "border-top-color" 属性来快速更换颜色，且能通过缩放来实现各种不同尺寸的三角形。另外，想绘制多个三角形，可以创建多个这样的容器，或者使用 CSS 类来重复使用styles。