border做三角形

切页面~

border: 四个边都可以设置。border-toporder-rightottomleft。

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;

}

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;

}

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

如：

.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;

}

 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;

}

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

现在换个方向，向右。

.t6{

margin: 30px;

height: 0px;

width: 0px;

border-top: 100px solid transparent;

border-left: 100px solid #F00;

border-bottom: 100px solid transparent;

}

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

那来几个吧~~

 8. 然后触类旁通吧~