方法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;

}