前言：網上最普遍的實現三角形的方法，就是通過控制border來實現，那為什麼可以呢？
我們先來看看border的表現形式。
觀察上圖可以發現，border表現為梯形。當減小box的寬高時，會發生如下變化：
從上圖很容易看出，當box寬度降低到很小，也就是border的梯形的上邊降到很小。所以想一想，當這一值降到0時，border就變成了三角形。如下圖：
所以我們就可以通過將元素寬高設定為0，而通過控制border來得到想要的三角形了。
將不需要方向的border設定為透明（transparent），就可以用來實現三角形了。比如想實現下三角形，就將border-left，border-bottom，border-right設定為transparent即可。
就不一一枚舉了，只要明白每個方向的border都是乙個三角形，就能通過調整border的大小和顏色/透明，獲得各種三角形和梯形了。
border標籤實現三角形效果
div body div 完全居中 position absolute top 50 left 50 margin top 100px margin left 100px width 0 height 0 border width 100px border style solid border co...
使用border做三角形
上經常會使用一些三角形，除了的方式，實際上利用border我們可以做出純css的三角形。我們知道border是個邊抖可以單獨設定，當四個邊相交的時候他們是什麼時候改變的？t0 通過demo可以看到border的相交的地方在45deg平分，當元素的width 和height屬性唄設定為0的時候 t1 ...
使用border 畫三角形
先看看效果 step1 首先我們定義乙個div step2 設定一下div的初始樣式 效果是這個樣子 step3 修改css width 0px height 0px border width 50px 效果這個樣子 step4 修改border顏色 border color red transpa...