方法1：利用border属性实现
给特定元素（目标元素）只设置border值，不设置高宽，会得到一个包含四个小三角的正方形，由于对角线的存在形成的三角形；
code：
<div class=".triangel"></div>
.triangle {
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid blue;
border-left: 50px solid yellow;
}
将特定的块级元素（目标元素）设置为不同方向的小三角的实现原理：
通过给border的四个方向值（top,right,bottom,left）设置相同的值或不同的值来实现不同的三角形；
a. 设置同一个值，得到等边三角形；
code:
<div class="bottom"></div>
.bottom {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;
border-left: 50px solid transparent;
}
b.设置不同的值得到非等边三角形；
code:
<div class="top"></div>
.top {
margin: 20px 0;
width: 0;
height: 0;
border-top: 131px solid red;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
}
c. 需要那个方向上的小三角，需要将其他三个方向的颜色设置为transparent(透明)， 该方向上是你需要的颜色；
但是三角形的朝向与之相反：top-bottom, bottom-top, right-left, left-right;
d.不能给目标元素设置width和height；
e.改变任意一个方向上border的值，会影响该方向相邻两边的形状；
code:
<div class="change"></div>
.change {
margin: 50px 0;
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid blue;
border-left: 50px solid yellow;
}
