转自:https://www.zfanw.com/blog/css-triangle.html
使用 CSS 画三角形?第一感觉不太可能。但那是对 border 有一点误会。
来看一个示例:
它的 HTML 代码如下:
<div style="width:100px;
height:100px;
background-color:black;
border-top:50px solid red;
border-right:50px solid green;
border-bottom:50px solid blue;
border-left:50px solid orange;">
</div>
我们需要注意,边框相接的地方,即相邻边框的样式。因为我们平时使用边框,一般只几像素宽,所以可以不注意它们相接的样式,但当边框达到50像素宽,就可以清楚看到,它们在相接时是如何处理的 – 这是 CSS 实现三角形的原理。
可以想像到,把 div 块的宽、高设为0将是如下样子:
这时,CSS 画三角形的做法就非常清楚。
比如,我要用 CSS 实现倒三角形,只要将下边框设为无,左、右边框颜色设为透明:
代码如下:
<div style="width:0;
height:0;
background-color:none;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:none;
border-top:50px solid red;">
</div>
其他方向的三角形同理可以实现。