一、前言
在前端开发的时候，我们有时候会需要用到一个三角形的形状，比如地址选择或者播放器里面播放按钮,
通常情况下，我们会使用图片或者svg去完成三角形效果图，但如果单纯使用css如何完成一个三角形呢？
实现过程似乎也并不困难，通过边框就可完成
二、如何实现?
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实现需求。
