先看一段代码:
<body>
<style>
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 100px 100px;
border-color: red rebeccapurple blue dimgrey;
}
</style>
<div class="triangle"></div>
</body>
得出了如下图形
其中border-style渲染边框的显示方式,border-width分别代表边框的宽度,边框的宽度是根据三角形的顶点到底边的距离。
由上图可知,要是想得到一个正三角形的话,只要将其余的三边的颜色变成透明即可:如下
<body>
<style>
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0px 100px 100px 100px; //border-top-width设置为0,为了让透明的顶部的三角形不占据空间
border-color: transparent transparent rebeccapurple transparent;
}
</style>
<div class="triangle"></div>
</body>
得到的结果如下
但是想要得到一个直角三角形,怎么办呢?
我们的三角形的高度是根据border-width来确定的,三角形的底则是根据相邻的两边的两个三角形的宽度来确定的,也就是说,上图中蓝色的三角形的底部宽度是由左边三角形border-left-width和右边三角形border-right-width两个相加来确定的;
那么要是我们要做一个直角三角形,则将一边的宽度设置为0即可
<body>
<style>
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 100px 100px;
border-color: transparent transparent blue transparent;
}
</style>
<div class="triangle"></div>
</body>
这样就可以得到一个直角三角形了