最終實(shí)現(xiàn)效果：（從左到右分別是實(shí)心、帶邊緣色、圓角三角形）
實(shí)心三角形
步驟一：正方形
先畫個正方形：
<pre data-tool="mdnice編輯器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><div class="filled-triangle"></div> <div class="margin-triangle">hi, sister</div> <div class="rounded-triangle"></div> <style> .filled-triangle { width: 100px; height: 100px; border: 1px solid cyan; } </style> </pre>
步驟二：加大 border
將 border 的值加大，并設(shè)為不同的顏色
<pre data-tool="mdnice編輯器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><style> .filled-triangle { width: 100px; height: 100px; border-bottom: 50px solid cyan; border-top: 50px solid blueviolet; border-left: 50px solid chartreuse; border-right: 50px solid gold; } </style> </pre>
步驟三：寬高均設(shè)為 0
然后把它的高度和寬度去掉，剩下四個border，就變成了：
<pre data-tool="mdnice編輯器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><style> .filled-triangle { width: 0px; height: 0px; border-bottom: 50px solid cyan; border-top: 50px solid blueviolet; border-left: 50px solid chartreuse; border-right: 50px solid gold; } </style> </pre>
可以看到，我們現(xiàn)在已經(jīng)得到四個三角形了
步驟四：保留唯一顏色（等腰三角形）
想要哪個三角形，就保留哪個三角形的顏色，其他的都設(shè)置為透明
<pre data-tool="mdnice編輯器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><style> .filled-triangle { width: 0px; height: 0px; border-bottom: 50px solid cyan; border-top: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid transparent; } </style> </pre>
這樣我們就得到了一個等腰三角形
簡化代碼
其實(shí)，我們不需要把四個 border 都設(shè)置一遍，只需設(shè)置你想要畫的三角形所涉及到的三條邊的 border 即可
以上步的畫最上面的三角形為例，只需設(shè)置下、左、右三條邊即可
<pre data-tool="mdnice編輯器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><style> .filled-triangle { width: 0px; height: 0px; border-bottom: 50px solid cyan; border-left: 50px solid transparent; border-right: 50px solid transparent; } </style> </pre>
不等腰三角形
上圖為等腰三角形，之所以為等腰，是因?yàn)樗械倪吙驅(qū)挾仁且粯拥?，如果我們將邊框?qū)挾仍O(shè)置為不同，那會怎樣？
例如：
<pre data-tool="mdnice編輯器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><style> .filled-triangle { width: 0px; height: 0px; border-bottom: 100px solid cyan; border-top: 100px solid transparent; border-left: 50px solid transparent; border-right: 50px solid transparent; } </style> </pre>
我們可以不局限于保留一條邊框，我們可以保留兩條，于是我們可以告別等腰，得到更加銳利的三角：
<pre data-tool="mdnice編輯器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><style> .filled-triangle { width: 0px; height: 0px; border-bottom: 50px solid cyan; border-top: 50px solid transparent; border-left: 50px solid cyan; border-right: 50px solid transparent; } </style> </pre>
上面都是底邊在水平線上；當(dāng)?shù)走吪c水平線不重合時，可以利用寬高比和CSS3中的 transform 屬性和 rotate 相結(jié)合，來實(shí)現(xiàn)我們想要呈現(xiàn)的三角形效果
氣泡聊天框（帶邊緣色的三角形）
步驟一：畫圓角矩形
<pre data-tool="mdnice編輯器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><div class="margin-triangle">hi, sister</div> <style> .margin-triangle { position: relative; width: 300px; height: 60px; padding: 10px; border: 1px solid cyan; border-radius: 8px; } </style> </pre>
步驟二：加尖角三角形
1. 畫一個深色的三角形
先畫一個深色的三角形，然后再畫一個同樣大小白色的三角形蓋在它上面，兩個三角形錯位 2 個像素，這樣深色三角形的邊緣就剛好露出一個像素
<pre data-tool="mdnice編輯器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">.margin-triangle::before{ position: absolute; top: 34px; left: -10px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 10px solid cyan; content: ''; } </pre>
2. 畫一個白色的三角形蓋上去，錯位 2 個像素
<pre data-tool="mdnice編輯器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">.margin-triangle::after{ position: absolute; top: 34px; left: -8px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 10px solid #fff; content: ''; } </pre>
圓角三角形
步驟一：畫一個正方形
<pre data-tool="mdnice編輯器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><div class="rounded-triangle"></div> <style> .rounded-triangle { width: 50px; height: 50px; background-color: cyan; } </style> </pre>
步驟二：畫一個菱形
利用 CSS transform 屬性旋轉(zhuǎn)、傾斜、縮放
<pre data-tool="mdnice編輯器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><style> .rounded-triangle { width: 50px; height: 50px; background-color: cyan; transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866); } </style> </pre>
步驟三：設(shè)置一個角為圓角
<pre data-tool="mdnice編輯器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">.rounded-triangle:after { border-top-right-radius: 30%; } </pre>
步驟四：拼接 3 個帶圓角的菱形
<pre data-tool="mdnice編輯器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><div class="rounded-triangle"></div> <style> .rounded-triangle { width: 50px; height: 50px; border-top-right-radius: 30%; background-color: cyan; transform: rotate(-60deg) skewX(-30deg) scale(1,.866); } .rounded-triangle:before, .rounded-triangle:after { content: ''; position: absolute; background-color: inherit; width: 50px; height: 50px; border-top-right-radius: 30%; } .rounded-triangle:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0,-50%); } .rounded-triangle:after { transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%); } </style> </pre>
參考：巧妙的實(shí)現(xiàn)帶圓角的三角形：https://juejin.cn/post/6984599136842547213
