CSS画三角形原理

先看一段代码：

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

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

猜你喜欢