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

最新推荐文章于 2022-08-05 21:20:29 发布

火星飞鸟

最新推荐文章于 2022-08-05 21:20:29 发布

阅读量333

点赞数 2

分类专栏：前端基础 CSS 文章标签：前端 css

本文链接：https://blog.youkuaiyun.com/Jack_lzx/article/details/116987869

版权

前端基础同时被 2 个专栏收录

111 篇文章

订阅专栏

CSS

10 篇文章

订阅专栏

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;
}