CSS绘制三角形

无论在网页，还是在各种app里，小三角都十分常见。比如微信、qq聊天气泡两端的小三角，还是提醒框边上的箭头三角等等。

Html5中添加了canvas元素，功能强大，可以绘制各式图形。不过有些时候，这种装饰形的小三角，用CSS绘制起来，会更加方便。

一、原理：border的真面目。

CSS中的border属性，大家对它不能再熟悉更多，但是它真正的形状是什么呢？

是一条有宽度的直线？一个长矩形？

实践出真知，show you the code。

<div></div>

上面是html。

下面是css。

div{
height: 100px;
width: 100px;
background-color: #3366cc;
border-top:20px solid #444;
}

当一个border没有相邻的边框时，它是一个矩形。

下面稍微更改一些css样式。

div{
width:100px;
height: 100px;
border-top: 80px solid #444;
border-bottom: 80px solid #666;
border-left: 80px solid #888;
border-right: 80px solid #aaa;
}

可以看到，当border有相邻时，它并不是一个矩形。此时为一个矩形。

1. 下底：div外边框的边长

2. 上底：div内容的边长。

3. 高：border的宽度。

也就是说，border会受到来自邻居边框的挤压。

二、画三角。

当上底为0的时候，也就是内容的边长为0时，border就变成了一个三角形。

------
<div></div>
------
div{
width:0px;
height:0px;
border-top: 80px solid #444;
border-bottom: 80px solid #666;
border-left: 80px solid #888;
border-right: 80px solid #aaa;
}

效果为：



border变成了三角形。

距离答案已经很近了。我们只需要把其他三个边框的颜色继承父元素，视野中就会出现一个三角形。

div{
width:0px;
height:0px;
border-top: 80px solid transparent;
border-bottom: 80px solid transparent;
border-left: 80px solid #3366cc;
}

注意：只需要设置三个边框：主边框（让我们这么称呼他），需要将其挤压的两个相邻边框。想要哪个方向的三角形，改变方向就可以了。

三、到此为止了吗？

这个是非常灵活的，我们可以通过控制主边框，以及挤压边框的宽度，来任意控制三角形的形状。

div{
width:0px;
height:0px;
border-top: 80px solid transparent;
border-bottom: 80px solid #3366cc;
border-left: 80px solid #3366cc;
border-right: 80px solid transparent;
}

div{
width:0px;
height:0px;
border-top: 50px solid transparent;
border-bottom:50px solid #3366cc;
border-left:100px solid #3366cc;
border-right: 100px solid transparent;
}

div{
width:0px;
height:0px;
border-top: 50px solid transparent;
border-bottom:50px solid transparent;
border-left:100px solid #3366cc;
}

四、实际应用

三角最好的出场位置，是在为元素上( :after，：before),便于定位，灵活方便。

一个绘画气泡做例子吧。

div{
position: relative;
width:200px;
height:50px;
border-radius:3px ;
background-color: #3366cc;
}

div:before{
position: absolute;
right: -14px;
top: 3px;
content:"";
border-left: 7px solid #3366cc;
border-right: 7px solid transparent;
border-top: 5px solid #3366cc;
border-bottom:5px solid transparent;
}