透過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>
不同的組合產生不同的效果，大家可以嘗試各種組合帶來的效果。
