通過CSS的border繪製三角形

標籤：

通過css的border 可以繪製出三角形, 不同的樣式組合，有著不同的效果，可以控制它的大小，顏色，方向。看下面各種圖形，相信可能還有很多圖形，大家都沒見過。

先寫出公用的樣式：

1 .border {2     width: 0;3     height: 0;4     5     border-color: transparent;6     border-width: 1rem;7     border-style: solid;8 }

 

在上面的css基礎上，添加下面的組合代碼，將可以控制三角形的方向：

1 border-left-color: #000;

 

 

1 border-right-color: #000;

 

 

 

1 border-top-color: #000;

 

 

 

1 border-bottom-color: #000;

 

 

1 border-left-color: #000;2 border-bottom-color: #000;

 

 

1 border-right-color: #000;2 border-bottom-color: #000;

 

 

1 border-right-color: #000;2 border-top-color: #000;

 

 

1 border-left-color: #000;2 border-top-color: #000;

 

 

1 border-top-color: #000;2 border-bottom-color: #000;

 

 

1 border-left-color: #000;2 border-right-color: #000;

 

 

1 border-top-color: #000;2 border-left-color: #000;3 border-bottom-color: #000;

 

 

1 border-top-color: #000;2 border-left-color: #000;3 border-right-color: #000;

 

 

1 border-bottom-color: #000;2 border-left-color: #000;3 border-right-color: #000;

 

 

1 border-top-color: #000;2 border-right-color: #000;3 border-bottom-color: #000;

 

 

還有下面的這個效果，

1 border-left-color: #000;2 border-right-color: #000;3 border-left-width: 3rem;

 

不同的組合產生不同的效果，大家可以嘗試各種組合帶來的效果。

通過CSS的border繪製三角形