我是如何发现用css边框（border）可以实现画三角形的

来源：恒创科技编辑：恒创科技编辑部

2024-01-14 08:55:59

平时我用css的border属性，都是用很小的像素，反映到界面上就是很细的边框，像下面这样。

<style>
.triangle{
 width:100px;
 height:100px;
 border:1px solid red;
}
</style>
<div class="triangle"></div>

我是如何发现用css边框（border）可以实现画三角形的_宽高

可怕的是，我也一直认为只能这样用。

当有一天，我为了调试，把各个边框像素放大，并且使用了不同的颜色，奇迹出现了。

<style>
.triangle{
 width:100px;
 height:100px;
 border-top:50px solid red;
 border-left:50px solid green;
 border-right:50px solid green;
 border-bottom:50px solid red;
}
</style>
<div class="triangle"></div>

我是如何发现用css边框（border）可以实现画三角形的_css_02

此时出现了四个梯形。

当我把中间div的宽高像素降低后，出现如下画面：

<style>
.triangle{
 width:10px;
 height:10px;
 border-top:50px solid red;
 border-left:50px solid green;
 border-right:50px solid green;
 border-bottom:50px solid red;
}
</style>
<div class="triangle"></div>

我是如何发现用css边框（border）可以实现画三角形的_宽高_03

所以我尝试把div宽高降到0像素：

<style>
.triangle{
 width:0px;
 height:0px;
 border-top:50px solid red;
 border-left:50px solid green;
 border-right:50px solid green;
 border-bottom:50px solid red;
}
</style>
<div class="triangle"></div>

我是如何发现用css边框（border）可以实现画三角形的_css_04

此时出现了四个三角形，如何得到一个呢？可以通过把不想要的部分设置成透明，仅留下一个三角形。

<style>
.triangle{
 width:0px;
 height:0px;
 border-top:100px solid red;
 border-left:50px solid transparent;
 border-right:50px solid transparent;
}
</style>
<div class="triangle"></div>

我是如何发现用css边框（border）可以实现画三角形的_css_05