一文学会用CSS画三角形，简单易懂！

1. 原理

其实很简单，利用给div加边框来实现。下面这个正常的盒子，以示区分，四条边框颜色不同，宽度加粗。

减小div的宽度、高度，并增加边框的宽度：

继续减小div的宽度、高度，并增加边框的宽度：

当div的宽度、高度减小到 0 时，三角形的形状就出来啦！

只显示一个三角形，将另外三条边框隐藏（颜色改为transparent即可）：

这样，一个简单的三角形就画出来了！

2. 总结

上述最后一个三角形的代码：

<div class="triangle"></div>

.triangle {
    width: 0;
    height: 0;
    border: solid 60px;
    border-color: transparent transparent red transparent;
}

这里的60px代表这个等腰直角三角形的高：

如果想调整三角形的形状，分别修改边框的四个宽度即可。

以下是几个不同形状三角形的样式代码：

（1）

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 100px 50px 0;
    border-color: transparent transparent red transparent;
}

（2）

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 100px 50px;
    border-color: transparent transparent red transparent;
}

（3）

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 100px 100px;
    border-color: transparent transparent red transparent;
}

（4）

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 100px 30px;
    border-color: transparent transparent red transparent;
}

---

欢迎在我的博客上访问：
https://lzxjack.top/