CSS 制作三角形原理剖析 - zengguoyu－IT工程師數位筆記本

文章出處

使用css制作三角形其實原理很簡單，下面一步步解析。

1、html代碼如下

1 <div class="triangle">
2 </div>

2、CSS代碼

1 .triangle{
2     
3     width: 200px;
4     height: 200px;
5     border: solid 40px red;
6 }

不錯，這里顯示是一個正方形，如下

3、下面改變個邊框顏色

1 .triangle{
2     
3     width: 200px;
4     height: 200px;
5     border-bottom: solid 40px #0000FF;
6     border-top: solid 40px #000000;
7     border-right: solid 40px #FF0000;
8     border-left: solid 40px #00FF00;
9 }

顯示效果如下

這里可能會感覺很奇怪，為什么四個角上的變成了斜的，下面在做一下變換

4、稍作變化，去掉上邊框

1 .triangle{
2     
3     width: 200px;
4     height: 200px;
5     border-bottom: solid 40px #0000FF; 
6     border-right: solid 40px #FF0000;
7     border-left: solid 40px #00FF00;
8 }

顯示效果如下

可以看出，瀏覽器渲染時，針對邊框角處理，以left和top為例說明：如果top 和left同時存在，各顯示一部分；如果只有left,left邊框才會顯示為矩形角。

5、現在縮小div寬度和高度

1 .triangle{
2     
3     width: 150px;
4     height: 90px;
5     border-bottom: solid 40px #0000FF;
6     border-top: solid 40px #000000;
7     border-right: solid 40px #FF0000;
8     border-left: solid 40px #00FF00;
9 }

顯示效果如下

可以理解，當寬度和高度同時變為0時，就是如下效果

1 .triangle{
2     
3     width: 0;
4     height: 0;
5     border-bottom: solid 40px #0000FF;
6     border-top: solid 40px #000000;
7     border-right: solid 40px #FF0000;
8     border-left: solid 40px #00FF00;
9 }

6、這時候如果只留一個邊框有顏色，其他邊框變成透明的話，就成了三角形了

 1 .triangle{
 2     
 3     width: 0;
 4     height: 0;
 5     border-bottom: solid 40px transparent;
 6     border-top: solid 40px #000000;/*只留上邊框有顏色，其他邊框透明*/
 7     border-right: solid 40px transparent;
 8     border-left: solid 40px transparent;
 9 }
10