用css製作三角形，理解

標籤：class   實現   link   lan   https   bsp   blank   pst   div   

如果真的很難理解的話，就在紙上畫那些邊框，就容易懂了

1、當如下設定代碼並賦給div相應的屬性時：

 

#sider2{

    width: 100px;

    height: 100px;

    border-top: 30px solid #000;

    border-right: 30px solid #ff0000;

    border-left: 30px solid #00ff00;

    border-bottom: 30px solid #0000ff;

}

會得到如下的一張圖：

2、接著當不設定border-bottom，即預設其為0時，可以得到下面的圖片；

3、然後當設定其width為0時，如：

4、繼續設定其height為0；

5、最後假若你把border-left,border-right設定為透明之後，就可以看到如下的三角形了。

6、這就是設定一個基本的三角形所需要的代碼，效果也看起來很直觀。

7、還有假如是想實現一個直角三角形，則最後需要兩個border邊的配合使用，瀏覽器會自動進行一些“展開變換”後就可以得到一個直角三角形。

 

#triangle-topleft {

    width: 0;

    height: 0;

    border-top: 100px solid red;

    border-right: 100px solid transparent;

}

用css製作三角形，理解