透過CSS的border繪製三角形

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

先寫出公共的樣式：

<span style="color: #008080;">1</span> <span style="color: #800000;">.border </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">4</span>     
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border-color</span>:<span style="color: #0000ff;"> transparent</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-width</span>:<span style="color: #0000ff;"> 1rem</span>;
<span style="color: #008080;">7</span> <span style="color: #ff0000;">    border-style</span>:<span style="color: #0000ff;"> solid</span>;
<span style="color: #008080;">8</span> }

 

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

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;</span>

 

 

<span style="color: #008080;">1</span> <span style="color: #800000;">border-right-color: #000;</span>

 

 

 

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;</span>

 

 

 

<span style="color: #008080;">1</span> <span style="color: #800000;">border-bottom-color: #000;</span>

 

 

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-bottom-color: #000;</span>

 

 

<span style="color: #008080;">1</span> <span style="color: #800000;">border-right-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-bottom-color: #000;</span>

 

 

<span style="color: #008080;">1</span> <span style="color: #800000;">border-right-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-top-color: #000;</span>

 

 

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-top-color: #000;</span>

 

 

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-bottom-color: #000;</span>

 

 

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-right-color: #000;</span>

 

 

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-bottom-color: #000;</span>

 

 

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-right-color: #000;</span>

 

 

<span style="color: #008080;">1</span> <span style="color: #800000;">border-bottom-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-right-color: #000;</span>

 

 

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-right-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-bottom-color: #000;</span>

 

 

還有下面的這個效果，

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-right-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-left-width: 3rem;</span>

 

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