方法1：利用border屬性實現(xiàn)
給特定元素（目標(biāo)元素）只設(shè)置border值，不設(shè)置高寬，會得到一個包含四個小三角的正方形，由于對角線的存在形成的三角形；
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;
}
將特定的塊級元素（目標(biāo)元素）設(shè)置為不同方向的小三角的實現(xiàn)原理：
通過給border的四個方向值（top,right,bottom,left）設(shè)置相同的值或不同的值來實現(xiàn)不同的三角形；
a. 設(shè)置同一個值，得到等邊三角形；
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.設(shè)置不同的值得到非等邊三角形；
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. 需要那個方向上的小三角，需要將其他三個方向的顏色設(shè)置為transparent(透明)， 該方向上是你需要的顏色；
但是三角形的朝向與之相反：top-bottom, bottom-top, right-left, left-right;
d.不能給目標(biāo)元素設(shè)置width和height；
e.改變?nèi)我庖粋€方向上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;
}
