css三角形_纯CSS制作三角形！这个技巧你会么？

在网页上做个三角形的形状，我想大部分人肯定第一个反应是用图片去实现这样的一个展示效果，但是其实使用纯css去写会更有优势些。

01.如果用图片多少还是有点点的占用内存的，用纯css写的话这个可以忽略不计。

02.可以不用切图，省下不少设计师的工作量

纯css三角形

01.实现原理

其实实现的原理很简单的，借助border边框属性就可以实现了。平时正常的一个div给了固定的宽高后再给个边框，看起来就是一个正常的方形的。

但是实际我们把边框放大后，其实他是由4个矩形组成的，即认为元素的border是由四个矩形边框拼接而成。

div {    width: 50px;    height: 50px;    border: 40px solid;    border-color: orange blue red green;}

既然他是由4个矩形拼接而成的，那如果我们把宽高都设置成0呢？

div {    width: 0;    height: 0;    border: 40px solid;    border-color: orange blue red green;}

div宽高为0

把div的宽高设置为0 后，这个时候就会发现整个的div，既然是由4个三角形组成的，那么为了达到最终三角形的效果，我们可以把其他的三角形(也就是边框)设置成白色或者透明色，不过一般都是设置成透明的。

div {    width: 0;    height: 0;    border: 40px solid;    border-color: transparent transparent red; //transparent透明}

最终效果

今天的css技巧就分享到这里了

大家有其他的技巧欢迎在下方留言版留言哦

------书籍推荐------

你学会了这个技巧了么？?