工作當(dāng)中為了達(dá)到設(shè)計(jì)效果經(jīng)常會遇到在頁面實(shí)現(xiàn)一個(gè)三角形的需求漾肮，這里列舉兩個(gè)常用方法（坐穩(wěn)發(fā)車??）
例如所需場景如下圖：
1.利用CSS border 生成三角形
html (how to make love)：? ??
<body>
<!--優(yōu)雅的實(shí)現(xiàn)一個(gè)三角形-->
<div class="triangle"></div>
</body>
css ??
body{
height:500px;
display: flex;
justify-content: center;
align-items: center;
background-color: #3985ff;
}
.triangle{
border: 10px solid;
border-color: transparent transparent #fff;
}
結(jié)果如圖：
實(shí)現(xiàn)原理：
.triangle{
background-color: #000;
/*width: 100px;*/
/*height: 100px;*/
border: 50px solid;
border-color: rebeccapurple #5fd40d #fff darkorange;
}
當(dāng)給元素不給寬高給足邊框時(shí)如圖所示：
需要哪一邊的三角形只需給剩下的邊設(shè)置為透明色即可。
2.利用CSS clip-path polygon 裁剪出一個(gè)三角形
好用的現(xiàn)代黑科技??
clip-path 是絕對能和transform 和 transition 相媲美的css3屬性刊头。具有無限的運(yùn)用場景饿这。
具體感受戳這里患膛。
及該網(wǎng)站作者自述創(chuàng)作的經(jīng)過http://www.smashingmagazine.com/2015/06/the-making-of-in-pieces/感興趣望詳讀??
html：
<body>
<!--優(yōu)雅的實(shí)現(xiàn)一個(gè)三角形 clip-path -->
<div class="triangle"></div>
</body>
css :
body{
height:500px;
display: flex;
justify-content: center;
align-items: center;
background-color: #3985ff;
}
.triangle{
clip-path: polygon(50% 0, 0% 100%, 100% 100%);
height: 10px;
width: 15px;
background-color: #fff;
}
效果如圖：
實(shí)現(xiàn)原理：
clip-path 的polygon（多邊形）根據(jù)點(diǎn)的坐標(biāo)繪制一條閉合的遮罩區(qū)域铐然。
clip-path詳解MDN童芹。
移動端Android4.4以上和IOS9以上的系統(tǒng)支持該屬性。
總結(jié)：
實(shí)際中通常用css border 給元素不給寬高只顯示一邊的方式來實(shí)現(xiàn)一個(gè)三角形绣版。
clip-path 局限于兼容性問題。其穩(wěn)定程度可在上述的MDN中查看得知歼疮。但確實(shí)是掃地圣僧級別??
學(xué)習(xí)文章：
張鑫旭的博客
janily的clip-path 教程
十分感謝杂抽。
END ——????
