配图源自 Freepik
本文将会详细介绍如何使用纯 CSS 实现各种三角形。文末会推荐一个在线工具。
了解边框
我们知道，任何 HTML 元素其实都是一个矩形的盒子。通过以下 CSS 属性可以设置元素的四条边框：
- border-top
- border-right
- border-bottom
- border-left
话不多说，先看示例：
<!-- 为了方便截图，父元素宽度设置为 300px -->
<div class="rect">some text...</div>
.rect {
border-top: 30px solid red;
border-right: 30px solid green;
border-bottom: 30px solid blue;
border-left: 30px solid orange;
}
接着，我们把 div 的文本干掉，再看下效果：
<div class="rect"></div>
由于 div 是块级元素，它默认占满父元素的宽度（截图中父元素宽度为 300px）。
然后，我们把 div 的 width 和 height 均设为 0，再看下效果：
.rect {
width: 0;
height: 0;
border-top: 30px solid red;
border-right: 30px solid green;
border-bottom: 30px solid blue;
border-left: 30px solid orange;
}
到这里，我想你应该知道如何设置各种形状的三角形了，最起码思路是有了。
只要把边、边框背景组合一下，就能实现各种形状了。
直觉性误区
假设我们要做一个左下边（橙蓝）组成的直角三角形，那是不是只要把右上（绿红）的边框干掉就行？
.rect {
width: 0;
height: 0;
/* border-top: 30px solid red; */
/* border-right: 30px solid green; */
border-bottom: 30px solid blue;
border-left: 30px solid orange;
}
这似乎不是我们想要的结果哦！换个思路，把右上的边框颜色设为透明（transparent）呢？
.rect {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid blue;
border-left: 30px solid orange;
}
这才是我们想要的结果。
我们来分析下原因：
由于我们将 div 的
width和height均设为0，那么它就靠border来撑开空间了。其中「水平方向」靠border-left、border-right来撑开，「垂直方向」靠border-top、border-bottom来撑开。所以设置四条边为 30px 的时候，它占用了 60 × 60 的空间。一旦我们干掉了上边框和右边框，它实际只占了 30 × 30 的空间，即右下角的部分。
基础三角形
本文不会一一列举各种形状的示例，道理是相通的，自由组合即可。
如果要实现以下这个直角三角形，有多少种做法呢？
我们做个辅助线，就很清晰了。
共有三种方式可实现：橙色 + 红色、二分之一橙色、二分之一红色。为了方便举例，以下示例不设为相同的颜色，实现需求形状即可，大小也请自行调整。
橙色 + 红色
四条边均不能省略，其中 border-top 和 border-left 设为相同的颜色，border-right 和 border-bottom 设为透明色。
.rect {
width: 0;
height: 0;
border-top: 30px solid red;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid orange;
}
二分之一橙色
不设置 border-top 和 border-right 两条边。boder-bottom 设为透明色，border-left 设置背景色。
.rect {
width: 0;
height: 0;
border-bottom: 30px solid transparent;
border-left: 30px solid orange;
}
二分之一红色
不设置 border-left 和 border-bottom 两条边。boder-right 设为透明色，border-top 设置背景色。
.rect {
width: 0;
height: 0;
border-top: 30px solid red;
border-right: 30px solid transparent;
}
特殊三角形
有时候可能要实现等腰三角形、等边三角形等。道理很简单，无非就是按要求先把宽高计算出来，然后设置对应边的 border-width 即可。
平时工作当然要善用工具了，比如 CSS triangle generator：
既能选择各种形状，也能输入设置宽高，那还用得着自己计算呢，对吧。
总结
使用 CSS 来画三角形，无非就是将元素的宽高设为 0，然后将四条边自由组合就能画出各种形状。较为麻烦的是，特殊三角形宽高需计算，但已经有工具在帮我们做这件事了，所以非常轻松就能完成了。
The end.
网友评论