有誰能詳細(xì)講一下css如何畫出一個(gè)三角形？

謝邀，下面講講我的思路！這是一個(gè)普通的 div ，一個(gè)邊長(zhǎng)為 100px 的正方形，border 寬度為 10px， 沒有任何技術(shù)含量，地球人都會(huì)畫。

我們知道 border 是分為 top、right、bottom、left 的，那么這個(gè)矩形的四個(gè)邊是怎樣劃分的呢？

顯然，要想公平地分割四條邊框，只有這樣：

所以我們?nèi)绻焉稀⒆蟆⒂胰龡l邊隱藏掉（顏色設(shè)為 transparent），會(huì)怎樣呢？吶，這就是個(gè)梯形了！感覺離革命勝利很近了是不是！仔細(xì)觀察一下這個(gè)梯形，和三角形有神馬區(qū)別呢？對(duì)！上面多了一條邊！上面這條邊有什么特點(diǎn)呢？

它的長(zhǎng)度剛好等于 div 的寬度！

所以我們要把這個(gè) div 的寬度縮?。《嘈『线m呢？當(dāng)然是 0 啦！

三角形粗來了！！?。。。?！

好像太小了點(diǎn)，怎么把它放大捏？

很簡(jiǎn)單，我們把 border 的寬度擴(kuò)大，怎么擴(kuò)大呢？顯然這條底邊和上邊已經(jīng)沒什么關(guān)系了，上邊唯一的作用就是影響三角形頂點(diǎn)到 div 上邊緣的距離。所以我們只需要擴(kuò)大左、下、右這三條邊。

下邊的 width 控制了三角形的高（150px）左右兩邊的 width 分別控制了三角形的底邊長(zhǎng)的兩部分（加起來共 200px）

再舉個(gè)例子，如果把右邊 width 設(shè)為 0

就是個(gè)直角三角形了~

利用相鄰的兩個(gè)三角形還可以拼出鈍角三角形~

實(shí)現(xiàn)的方法還有很多，具體看你用哪種！