文章目录
一、前言
在前端开发的时候，我们有时候会需要用到一个三角形的形状，比如地址选择或者播放器里面播放按钮,
通常情况下，我们会使用图片或者svg去完成三角形效果图，但如果单纯使用css如何完成一个三角形呢？
实现过程似乎也并不困难，通过边框就可完成
扫描二维码关注公众号，回复：
15294291 查看本文章
二、如何实现?
1.实现简易三角形
前置小知识:当块级元素宽高都为0,且只设置边框的时候,则会构成正方体。具体实现如下
div {
width: 0;
height: 0;
border: 50px solid red;
}效果如下
实质上上下左右的边框都是一个三角形，所以我们 显示我们想要的三角形，隐藏其他三个方向的三角形即可。
假如我们想留下上边的三角形
div {
width: 0;
height: 0;
/* 排他思想，给全部的边框设置为透明 */
border: 50px solid transparent;
/* 单独给你想要的三角形设置样式 */
border-top: 100px solid red;
}效果如下
2.实现空心三角形
如果想要实现一个只有边框是空心的三角形，由于这里不能再使用
border属性，所以最直接的方法是利用伪类新建一个小一点的三角形定位上去
(1).当为div添加伪类利用绝对定位 初始定位left:0 right:0,后面再进行调整
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 50px solid red;
position: relative;
}
div::after {
content: '';
border: 40px solid transparent;
border-bottom: 40px solid green;
position: absolute;
top: 0px;
left: 0px;
}现在初始的效果如下
(2).随后再对伪类元素(绿色三角形)进行位置的调整和设置 border-bottom颜色为white，达到中间空心的效果
代码如下
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 50px solid red;
position: relative;
}
div::after {
content: '';
border: 40px solid transparent;
/* 将伪类元素的三角形设置为白色，达到空心的效果 */
border-bottom: 40px solid white;
position: absolute;
/* 调整伪类元素的位置 */
top: -34px;
left: -39px;
}达到的最终效果如下
三。小结
以上我们实现了用css绘制三角形的两种方法，再实际开发中应该也会遇到，我们不仅仅可以使用字体图标库实现需求，我们自己也可以通过原生的css实现需求。