Border
css中的邊框屬性，是一個複合屬性，其具體屬性有：
border-width: 0 5px 5px 5px;
border-style: solid;
border-color: transparent transparent blue transparent;
上面的這個屬性所定義的一個塊元素，在不設定寬高的情況下，渲染出來是什麼呢？是一個
藍色朝上邊長5px的等邊三角形！（視覺上）
其中原理很簡單，在有邊框元素寬高為0的時候其實繪製出來同樣是一個矩形塊。這塊矩形塊由三塊透明的等邊三角形以及一個藍色三角形組成，所佔的元素塊大小為：
寬： 10px
高： 5px
經過我自己的實測後其等式為：
寬 = border-right-width + border-left-width
高 = border-top-width + border-bottom-width
平行四邊形
首先，平行四邊形進行拆分 = 兩個對稱的三角形
接下來就很簡單了，為上面的藍色三角形元素新增一個偽類，進行對稱三角形製造，然後進行絕對定位拼接。
是不是很easy？
多邊形..
同理可得更多的多邊形，原理類似，就是製造更多的三角形進行拼接，這個就類似於微積分計算一般，計算基值（極小值），然後進行積分拼接就得到原本不能得到的結果了。
不等邊三角形/直角三角形定製
其實同樣是套用上面寬高的兩個公式後再結合第三條公式：
偏差值X = Max(border-right-width, border-left-width) - 元素寬/2
偏差方向 = Max(border-right-width, border-left-width) === border-right-width ? 'right' : 'left'
偏差值Y = Max(border-top-width, border-bottom-width) - 元素高/2
偏差方向 = Max(border-top-width, border-bottom-width) === border-top-width ? 'top' : 'bottom'
即：
（左 - 右）/2， （上 - 下）/2（參考translate(x,y)方向得出）
得出該值後將矩形塊對角線相交點進行平移後即得到相應的四個三角形的頂點（在一個點上）所在。
由此你可以定製自己想要的不等邊三角形了，挪（頂點）偏差值就是了。
由於本文撰寫過程中沒有順手截圖，請自行開啟w3school類教學網站實踐結合！不然就有些抽象！！（眼過千遍，不如手過一遍）
至於直角三角形，更簡單了，把頂點挪到矩形的任一邊上時就是一個直角三角形了！（這裡不給程式碼提示了，自己實踐結合以上就很簡單了）