css画三角形

在写前端时候，ui设计时候会把一些框框修饰一下，像三角形这种，这种使用图片的话就很占请求资源，所以一般这种情况下，能使用css3写出来的就尽量使用css控制。

在写三角形时候我们把握住边宽特性就能控制想要的样式,如下：

<div class="item6"></div>
.item6{
    width: 0;
    height: 0;
    border-color: #f00 #0f0 #00f #ff0;
    border-style: solid;
    border-width: 32px 32px 32px 32px;
}

在这里我们将举例几个

.item1{
   width: 0;
   height: 0;
   border-color: #0839b8 transparent transparent transparent;
   border-style: solid;
   border-width: 32px 32px 0 0;
}
.item2{
   width: 0;
   height: 0;
   border-color: #0839b8 transparent transparent transparent;
   border-style: solid;
   border-width: 32px 0 0 32px;
}
.item3{
   width: 0;
   height: 0;
   border-color: #0839b8 transparent transparent transparent;
   border-style: solid;
   border-width: 32px 32px 0 32px;
}
.item4{
   width: 0;
   height: 0;
   border-color: transparent transparent #0839b8 #0839b8;
   border-style: solid;
   border-width: 0 32px 32px 32px;
}
.item5{
   width: 0;
   height: 0;
   border-color: #0839b8 transparent transparent #0839b8;
   border-style: solid;
   border-width: 32px 32px 0 50px;
}

实现的效果如下：

来源：https://www.cnblogs.com/xiaolanschool/p/11348127.html