css画直角三角形,关于CSS画三角形的那些事

用CSS画一个三角形，是不难的问题，但我却掌握的不够熟练，例如当要求为画一个直角三角形或者等腰三角形，我就有点反应不过来。所以，在这篇中点透它，以后再见，不含糊。

原理分析

用CSS画三角形，实际上就是在一个框的四边上做文章，如果有一个div，为其设置100px的宽和高，并给其添加10px的黑色边框，这四条边形成一个闭合的正方形，那么这四条边如何分才能达到平均分配的效果呢？那只能是这样：

可以看到，每一条边单独拉出来看就是一个梯形，而用CSS画三角形其实就是从这个梯形下手，如何把这个梯形转换为一个三角形扥问题。

其实原理很简单，当div的宽和高逐渐变小的时候，其中央的留白部分逐渐变小，四条边向中央收缩，例如，当宽高都变成50px的时候，就是这个样子了：

可以想象，当宽高为0的时候，中间的空白将不可见，而边框会恰好融合成为一个黑色的矩形，而此时，每一条边就是一个三角形，当为四条边添加不同的颜色，并增大边框宽度之后，可以明晰地看出此时各边的形态：

div {

width: 0;

height: 0;

border-width: 50px;

border-style: solid;

border-color: green yellow black orange;

}

这时候就很清晰了，我们只需要使其中三条边不可见，则可见的部分就是一个三角形。为达目的，很简单，将三条边颜色设置为透明即可以。

border-color: transparent transparent black transparent;

当当当当~效果如下：

这个时候，其他三个边是存在的，只不过是透明的，那么，我们可不可以直接将其他三条边取消呢？——当然不可以，没有宽高度只有一条边，这个div还能够出现吗~

到此，最基本的三角形就简单地完成了，可以看到，三角形的高就是div的底边宽度，若要三角形更尖(斜度更大)一些，只需要加大底边的宽度即可。而底边的长度，则由两条侧边的宽度决定，两者加起来的宽度就是三角形底边的宽度，而div顶部的一条边框的宽度则只会影响三角形定点距离四条边形成矩形的顶部的距离。

明白了原理之后，想画什么三角形就很简单了。例如，一个直角三角形，如果直角边为右边和底边的话，则需要将右边框设置为0了。也就是border-right-width: 0;若要一个钝角三角形，则将左右两边的边框宽度加大即可以。当然也可以作出各个朝向的三角形了。

实现一个收藏Icon

学会了画三角形，还可以在此基础上来创造出许多形状的图形，例如下面这个常见的收藏图案：

如何在一个div中使用CSS完成这样的效果呢？通过观察，不难发现，这个icon其实是一个正方形减去一个三角形构成的，所以我们的思路就很清晰了，将下面一个三角形变成透明就可以了~

div {

width: 0;

height: 0;

border: 50px solid #ff5500;

border-bottom-color: transparent;

}

和伪元素结合实现双箭头

画一个三角形是很简单的，那么画一个像下面这样的双箭头呢？

当然，可以用两个 div 来很快实现，但是为了不增加多余的标签，可以使用伪类实现这个效果。

div,

div::after {

width: 0;

height: 0;

display: inline-block;

border: 50px;

border-style: solid;

border-color: transparent #ff5500 transparent transparent;

}

div::after {

content: "";

margin-top: -50px;

}

实现Tips气泡

同样借助伪元素，可以实现一个像下面这样的气泡。

使用伪元素来实现气泡右端的直角三角形，通过position: absolute;来将它定位。代码如下：

div {

width: 90px;

height: 40px;

border-radius: 3px;

background-color: #009bdb;

position: relative;

color: #fff;

font-size: 14px;

padding-left: 10px;

line-height: 40px;

}

div::after {

content: "";

width: 0;

height: 0;

display: inline-block;

border-style: solid;

border-width: 0 8px 8px 10px;

border-color: transparent transparent transparent #009bdb;

position: absolute;

top: 12px; left: 100px;

}

从上面的例子可以看出，运用的原理大同小异，只要灵活变通，就可以实现形态各异的图形组合。