【前端攻城獅之路】手把手教你用CSS畫三角形（百度15前端研發筆試卷）

[問答題] 題目描述 請用CSS實現如下圖的樣式，相關尺寸如圖示，其中dom結構為：
<div id=”demo”></div>

實現思路

1、先思考一個問題：border-width比較大時，它的四個邊框是如何劃分的。答案是 ” 等面積劃分 “ ，如下：

（四個全等梯形）

2、進一步考慮，把div的width和height都設為0，即只要邊框，那麼它顯示的結果就是這樣的：

（四個全等三角形）

3、如此，我們就可以把左邊框設定成黑色，上、右、下設定不顯示（透明色），就可以獲得這樣的三角形辣：

4、把黑三角移動到一個正方形大盒子的右邊框外，並下移20px，就是如下效果辣：

5、到了這一步，還需要”蓋掉“黑三角的內容，只留一個黑邊。所以，回到步驟3再照做一個小一些的白三角，疊在這個黑三角上面，就出來題目要的效果辣：

實現代碼如下：

/*正方形大盒子*/div#container{width: 100px;height: 100px;border: #000 2px solid;background-color: #fff;position: relative;z-index: 1;/*第1層*/}/*下層黑三角*/div#div1{width: 0;height: 0;border: transparent 13px solid;border-left: #000 13px solid;position: absolute;left: 100%;top: 20px;z-index: 2;/*第2層*/}/*上層白三角*/div#div2{width: 0;height: 0;border: transparent 10px solid;border-left: white 10px solid;position: absolute;left: 100%;top: 23px;z-index: 3;/*第3層*/}

<div id="container"><div id="div1"></div><div id="div2"></div></div>

代碼注意事項：

1、定位機制：父元素用relative，子項目要用absolute + left/top來相對父元素進行定位。

2、層疊順序：先放大盒子，再放黑三角，最後放白三角，已在CSS注釋標註。（貌似官方是用偽類來做的，個人認為層疊的思路更清晰）

最終總結：

用邊框來做三角形的思想是看了網上的題解才漲姿勢的。。真的是漲姿勢，我本想用個div把直角旋轉過去的。。。