如何使用CSS畫三角形

在盒模型中，當內容區寬度高度均設爲0px後，對border進行設定會如圖所示：

這樣咱們經過對各個方向的border進行設定，可以獲得咱們想要的三角形(若是有一邊border寬度爲0的話，那麼它將會縮成一個點，由其餘兩邊鏈接上)；

假如左border不存在，這時會是：

    此時有：黑色border的寬度決定了整個長方體的寬，紅和藍border的寬度之和決定了整個長方體的長；

這時將紅藍border的顏色設置爲transparent透明，就獲得了一個黑色實心三角形；

空心三角形就是經過在一個實心三角形以後添加一個顏色爲白色的略小一些的僞類三角形，而且經過position定位覆蓋原實心三角形；

 

下面是一些例子：

body：

1     <h1>實心</h1><hr>
2     等腰三角形(箭頭朝上)<div id="div1"></div><hr>
3     等腰三角形(箭頭朝下)<div id="div2"></div><hr>
4     直角三角形(箭頭左上)<div id="div3"></div><hr>
5     直角三角形(箭頭右上)<div id="div4"></div><hr>
6     <h1>空心</h1><hr>
7     空心三角形<div id="div5"></div>

css：

 1  #div1{
 2             width: 0px;
 3             height: 0px;
 4             border-right:50px solid transparent;
 5             border-bottom:100px solid skyblue;
 6             border-left:50px solid transparent;
 7         }
 8 
 9  #div2{
10             width: 0px;
11             height: 0px;
12             border-top:100px solid skyblue;
13             border-right:50px solid transparent;
14             border-left:50px solid transparent;
15         }
16 
17  #div3{
18             width: 0px;
19             height: 0px;
20             border: 50px solid skyblue;
21             border-right-color: transparent;
22             border-bottom-color: transparent;
23         }
24 
25  #div4{
26             width: 0px;
27             height: 0px;
28             border: 50px solid skyblue;
29             border-bottom-color: transparent;
30             border-left-color: transparent;
31         }
32 
33  #div5{
34             position: relative;
35             width: 0px;
36             height: 0px;
37             border: 50px solid transparent;
38             border-right-color:skyblue;
39         }
40 
41  #div5::after{
42             content: "";
43             width: 0px;
44             height: 0px;
45             border: 40px solid transparent;
46             border-right-color:white;
47             position: absolute;
48                 left: -35px;
49                 bottom: -40px;
50         }

效果圖：