border做三角形

切页面~

border: 四个边都可以设置。border-top\border-right\bottom\left。

1. 四个边交汇的地方是怎么处理的呢？

平分~

.t1{
margin:30px;
height:100px;
width:100px;
border-top:solid 30px red;
border-left:solid 30px green;
border-right:solid 30px orange;
border-bottom:solid 30px blue;
}

.t1{
margin:30px;
height:100px;
width:100px;
border-top:solid 30px red;
border-left:solid 30px green;
border-right:solid 30px orange;
border-bottom:solid 30px blue;
}

2. 所以：如果当宽高都为零的时候呢？只有border起作用，四个边交汇，就会出现以下的状态了~

.t2{
margin:30px;
height:0px;
width:0px;
border-top:solid 100px red;
border-left:solid 100px green;
border-right:solid 100px orange;
border-bottom:solid 100px blue;
}

.t2{
margin:30px;
height:0px;
width:0px;
border-top:solid 100px red;
border-left:solid 100px green;
border-right:solid 100px orange;
border-bottom:solid 100px blue;
}

3. 所以，当只设置两个边的时候，如top和left，则默认其他值为0，这时相当于上左交汇，左上角被平分。

如：

.t3{
    margin: 30px;
    height: 0px;
    width: 0px;
    border-top: 100px solid red;
    border-left: 100px solid black;
}

.t3{
margin: 30px;
height: 0px;
width: 0px;
border-top: 100px solid red;
border-left: 100px solid black;
}

4. 然后在此基础上，继续。如果设置第三条边为透明呢？

.t4{
    margin: 30px;
    height: 0px;
    width: 0px;
    border-top: 100px solid #F00;
    border-left: 100px solid #000;
    border-right: 100px solid transparent;
}

.t4{
margin: 30px;
height: 0px;
width: 0px;
border-top: 100px solid #F00;
border-left: 100px solid #000;
border-right: 100px solid transparent;
}

5. 可见border为0时，是不显示的，当设置另一个边为透明时，如right，则top被撑开，并占用了自己的平分位置。于是出现了一个很中正的三角形。

在此基础上，如果把left也设置成transparent，那是不是就会出现一个向下的箭头呢？

.t5{
margin: 30px;
height: 0px;
width: 0px;
border-top: 100px solid #F00;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}

.t5{
margin: 30px;
height: 0px;
width: 0px;
border-top: 100px solid #F00;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}

6. 可见，要一个向哪个方向的箭头，只需要将其对立面设置一个显示的值，两边设置成透明就好了~~~

现在换个方向，向右。

.t6{
margin: 30px;
height: 0px;
width: 0px;
border-top: 100px solid transparent;
border-left: 100px solid #F00;
border-bottom: 100px solid transparent;
}

.t6{
margin: 30px;
height: 0px;
width: 0px;
border-top: 100px solid transparent;
border-left: 100px solid #F00;
border-bottom: 100px solid transparent;
}

7. 果然啊~那么如果设置各种奇特的三角形，也就好说了，把长度改变下，是不是就可以了~~

那来几个吧~~

.t7{
margin: 30px;
height: 0px;
width: 0px;
border-top: 10px solid transparent;
border-left: 100px solid #F00;
border-bottom: 100px solid transparent;
}

.t8{
margin: 30px;
height: 0px;
width: 0px;
border-top: 10px solid transparent;
border-left: 200px solid #F00;
border-bottom: 100px solid transparent;
}

8. 然后触类旁通吧~