CSS之border繪制三角形

用CSS的border可以畫出高質量的三角形。

我們一般會這么使用border:

 

#test-border {
    width: 100px;
    height: 100px;
    margin: 100px auto;
    background: #fff;
    border: 2px solid orange;
}
　　

得到的效果如下：

 

 

 

 因為我們一般設的border-width都很小，導致很多童鞋以為border是四個矩形，然而其實並不是，我們把content的寬度變小，border-width增大，並塗上不同的顏色,更改代碼如下：

#test-border {
    width: 40px;
    height: 40px;
    margin: 100px auto;
    background: #fff;
    border: 30px solid;
    border-color: green orange;
}

　　效果如下：

　　

 

 

 

　　那么把width和height設為0，就可以得到四個三角形：

　　

 

注意，這里的border-width指的是外邊界到中心點的垂直距離！即如上圖所示。 

　　border-width設置值方式如下：

　　　 1，設一個值：為四個方向；

　　　　2，設兩個值：上下--左右；

　　　　3，設三個值：上--左右--下；

　　　　4，設四個值：上--右--下--左。

　　

　　比如現在我們需要一個底邊長100px，高60px的正擺放三角形，根據以上知識，可推算如下：

　　　  1,  正向三角形：頂部的border-width為0， 頂部和左右的顏色都為transparent；

　　　　2，底邊長100px = 左右的border-width各為50px；

　　　　3，高60px = border-bottom的width為60px;

　　故改寫代碼如下：

　　

#test-border {
    width: 0;
    height: 0;
    margin: 100px auto;
    border-width: 0 50px 60px;
    border-color: transparent transparent orange;
    border-style: solid;
}

　　結果如下：