工作当中为了达到设计效果经常会遇到在页面实现一个三角形的需求，这里列举两个常用方法（坐稳发车😆）
例如所需场景如下图：
优雅的实现一个三角形-
1.利用CSS border 生成三角形
html (how to make love)： 👱
<body>
<!--优雅的实现一个三角形-->
<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;
}
结果如图：
如何优雅的实现一个三角形-2.png
实现原理：
.triangle{
background-color: #000;
/*width: 100px;*/
/*height: 100px;*/
border: 50px solid;
border-color: rebeccapurple #5fd40d #fff darkorange;
}
当给元素不给宽高给足边框时如图所示：
如何优雅的实现一个三角形-3.png
需要哪一边的三角形只需给剩下的边设置为透明色即可。
2.利用CSS clip-path polygon 裁剪出一个三角形
好用的现代黑科技😆
clip-path 是绝对能和transform 和 transition 相媲美的css3属性。具有无限的运用场景。
list.png
具体感受戳这里。
及该网站作者自述创作的经过http://www.smashingmagazine.com/2015/06/the-making-of-in-pieces/感兴趣望详读🚼
html：
<body>
<!--优雅的实现一个三角形 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;
}
效果如图：
优雅的实现一个三角形4.png
实现原理：
clip-path 的polygon（多边形）根据点的坐标绘制一条闭合的遮罩区域。
clip-path详解MDN。
移动端Android4.4以上和IOS9以上的系统支持该属性。
总结：
实际中通常用css border 给元素不给宽高只显示一边的方式来实现一个三角形。
clip-path 局限于兼容性问题。其稳定程度可在上述的MDN中查看得知。但确实是扫地圣僧级别😆
学习文章：
张鑫旭的博客
janily的clip-path 教程
十分感谢。
END ——😆🎃
网友评论