CSS三角 border: 20px solid #fff； width:0；height:0；

目录

1. 等腰三角形

2. 不等腰的三角形

3.三角形，形成>或者是<

---

1. 等腰三角形

尖角朝右边的三角形

        div {
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-left-color: red;
        }

核心步骤：

1. 宽度和高度都设置为0

2. 四条边的边框设置大小，颜色，和样式

3. 其中一条边设置颜色为【transparent】

4. 设置left值，三角形朝右，right反之；设置top，三角形朝下，bottom反之

2. 不等腰的三角形

可以设置不等腰的三角形，可以调整一条【边】的宽度不同

如果三角形尖角朝右，那么调整【border-top-width】或者是【border-bottom-width】的值

        div {
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-top-width: 30px;
            border-left-color: red;
        }

3.三角形，形成>或者是<

        div {
            position: relative;
        }

        div::after,
        div::before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-left-color: red;
        }

        div::before {
            right: 0;
        }

        div::after {
            right: 1px;
            border-left-color: #fff;
        }

要点：

1. 利用伪元素，设置两个伪元素，【after】【before】

2. 先统一设置宽度和高度都为0；同时边框一边的颜色唯独不是【transparent】

3. 一个边框的right为0

4. 其中一个伪元素的边框颜色设置为白色且right为1px

5. 实现如下三角的核心是：after的背景是白色，要遮住before的一部分白色

参考文章：

1. CSS实现三角形_一只前端小菜鸟-CSDN博客_css三角形

2. CSS实现各种三角形_vue-CSDN博客_css三角形

尾声：

学号id：201903090124-10

现在是大三学生，学习到了前后端交互的npm包阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。