使用css绘制三角形

效果

image.png

源码

借助css中的border属性即可

• HTML

<div class="triangle"></div>

• CSS

.triangel {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 60px solid #ccc;
}

原理

1. 对border的误解

• 一般而言，我们使用border是为了给某个元素加边框，时其宽度大多为1～2px。这就使我们以为元素的边框是4个矩形，实则不然。
• 事实上，元素的border是由4个三角形组成的。我们可以增大border的宽度，并为其设置不同颜色：

.wide-border-box {
    width: 50px;
    height: 50px;
    border: 30px solid;
    border-color: #f1a4a4 #faffa7 #82c8f1 #f7cca7;
}

效果如下：

image.png
进一步地，将元素的内容尺寸都设置为0，效果如下：
image.png
可以看出，此时元素由4个三角形拼接而成。

2. 借助border的组合绘制三角形

由上述分析可得，如果要绘制向上的三角形，只需保留border-bottom，并将其余border设为透明（transport）即可。依此类推。

---

相关推荐：张鑫旭：常见的CSS图形绘制合集