CSS画三角形原理

先看一段代码:



得出了如下图形

CSS画三角形原理_第1张图片

其中border-style渲染边框的显示方式,border-width分别代表边框的宽度,边框的宽度是根据三角形的顶点到底边的距离。

由上图可知,要是想得到一个正三角形的话,只要将其余的三边的颜色变成透明即可:如下



得到的结果如下

CSS画三角形原理_第2张图片

但是想要得到一个直角三角形,怎么办呢?

CSS画三角形原理_第3张图片

我们的三角形的高度是根据border-width来确定的,三角形的底则是根据相邻的两边的两个三角形的宽度来确定的,也就是说,上图中蓝色的三角形的底部宽度是由左边三角形border-left-width和右边三角形border-right-width两个相加来确定的;

那么要是我们要做一个直角三角形,则将一边的宽度设置为0即可



CSS画三角形原理_第4张图片

这样就可以得到一个直角三角形了

你可能感兴趣的:(CSS)