一、前言

在前端开发的时候，我们有时候会需要用到一个三角形的形状，比如地址选择或者播放器里面播放按钮,

通常情况下，我们会使用图片或者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;
            }

达到的最终效果如下