通過偽類元素::after,::before實現(xiàn)圓角捉片、變換平痰、旋轉(zhuǎn)、漸變實現(xiàn)鏤空三角形伍纫，再通過改變寬度填充鏤空部分宗雇，最后漸變顏色色值取半及調(diào)整漸變方向。
一莹规、背景
由于該三角形為品牌設(shè)計元素之一赔蒲，在多個頁面均需要展示數(shù)個“大小不一 & 角度各異” 的?漸變圓角三角形?×际考慮加載的圖片數(shù)量過多舞虱，想嘗試用純css來實現(xiàn)。
border實現(xiàn)三角形
漸變圓角三角形
二母市、分析思路
【方案一】
用 border 實現(xiàn)三角形
border實現(xiàn)三角形效果圖jie
結(jié)論：
1.不是等邊三角
2.不是圓角
3.border-color 無法設(shè)置漸變顏色
【方案二】
用 圓角矩形 + skew變換
實現(xiàn)效果
結(jié)論：
1.滿足等邊三角形
2.滿足漸變問題
3.無法解決圓角問題
三矾兜、解決方案
【方案三】
用三個圓角矩形組合成三角形。參考【圓角鏤空三角形】
圓角鏤空三角形
在這個基礎(chǔ)上的衍生圖形有：
衍生圖形
最后一個圖形就是我們需要的圓角漸變?nèi)切卫瞺
這里需要注意的是漸變的方向和色值
三條邊的漸變方向都是藍色箭頭所指方向患久。而藍色框選的一條邊的漸變色值邊界值需要取另外兩條邊的漸變色值的中間值椅寺。這樣才能夠讓由三條邊組合成的圓角漸變?nèi)切蔚臐u變色值比較自然。
實現(xiàn)代碼：
重點注意注釋部分
1.偽類元素的兩條邊的旋轉(zhuǎn)中心的計算方式墙杯。
2.藍色那條邊的漸變臨界值的計算方式配并。
四、實現(xiàn)原理
通過偽類元素::after,::before實現(xiàn)圓角高镐、變換溉旋、旋轉(zhuǎn)、漸變實現(xiàn)鏤空三角形嫉髓，再通過改變寬度填充鏤空部分观腊，最后注意漸變顏色色值取半及漸變方向。
