1 min read

CSS 画三角形

使用 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>

其他方向的三角形同理可以实现。

报告问题 修订

如果你有自建 https 代理的需求,欢迎尝试 Phantom,一键搭建,方便快捷。查看 demo