字数
645 字
阅读时间
3 分钟
实现一个简单的三角形
使用 CSS 盒模型中的 border（边框）即可实现如下所示的三角形：
实现原理
首先来看在为元素添加 border 时，border 的样子；假设有如下代码：
css
<div></div>
div {
width: 50px;
height: 50px;
border: 2px solid orange;
}效果图：
这是我们平常使用 border 最普遍的情况——往往只给 border 一个较小的宽度（通常为 1-2px）；然而这样的日常用法就会容易让大家对 border 的形成方式产生误解，即认为元素的 border 是由四个矩形边框拼接而成。
然而事实并不是这样。实际上，元素的 border 是由 三角形 组合而成，为了说明这个问题，我们可以增大 border 的宽度，并为各 border 边设置不同的颜色:
css
div {
width: 50px;
height: 50px;
border: 40px solid;
border-color: orange blue red green;
}效果图：
既然如此，那么更进一步，把元素的内容尺寸设置为 0 会发生什么情况呢？
css
div {
width: 0;
height: 0;
border: 40px solid;
border-color: orange blue red green;
}效果图：
我们将惊奇地发现，此时元素由上下左右 4 个三角形 " 拼接 " 而成；那么，为了实现最终的效果，即保留最下方的三角形，还应该怎么做？很简单，我们只需要把其它 border 边的颜色设置为白色或透明色：
css
div {
width: 0;
height: 0;
border: 40px solid;
border-color: transparent transparent red;
}
Duang~ 最终的简单三角形就绘制出来了。同理，如果想要得到其它边上的三角形，只需要将剩余的 border 边颜色设置为白色或透明色即可。
不过，被 " 隐藏 " 的上 border 仍然占据着空间，要想使得绘制出的三角形尺寸最小化，还需要将上 border 的宽度设置为 0（其它情况同理）：
css
div {
width: 0;
height: 0;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent red;
}demo 演示
来看这个例子
css
div {
width:0;
height:0;
border-color:red red transparent transparent;
border-style:solid;
border-width:100px 100px 100px 0;
}看到上右有实体，下左为空白，是不是以为是一个倒立的 直角三角形？？
其实不然，因为 div 的左边没有实体，无法占据空间，最后演变成了 直角梯形
转载
贡献者
jiechen