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

　　結果以下：