CSS:绘制三角形

236 阅读2分钟

本文内容基于 border-box盒模型。

* {
    box-sizing: border-box;
}

重新认识 border:4个梯形

首先我们对一个宽高为 100px 的 div 元素设置 1px 的 border,

.div {
    height: 100px;
    width: 100px;
    border: 1px solid red;
}

我们可以看到 border 是一个矩形。 接下来,我们回忆一下,border 还分为 top、right、bottom、left 4个边。那么这四个边都是宽度为 1px 的矩形吗,那它们连接处是重叠的还是?

我们不妨将 border 的宽度变大, 并给border 的4个边设置不同的颜色

.div {
    height: 100px;
    width: 100px;
    border: 20px solid #000;
    border-top-color: blue;
    border-right-color: green;
    border-bottom-color: pink;
    border-left-color: red;
}

我们可以发现,其实 border 的4个边不是简单的矩形,它是在角中进行对分,每个边都是一个梯形,下底与 box 的宽或高一致,上底的长度是 下底 - 2倍 border 宽度

梯形 -> 三角形

那么我们可以通过该将 border 各条边的宽度设置为对应的宽高的一般,就可以让梯形的上底为0,即可得到三角形。

.div {
    margin: 100px;
    height: 100px;
    width: 100px;
    border: 50px solid #000;
    border-top-color: blue;
    border-right-color: green;
    border-bottom-color: pink;
    border-left-color: red;
}

不同朝向的三角形

我们有了4个三角形之后,可以对不同位置 border 设置透明颜色,达到不同朝向的三角形的效果。 下面举两个例子,剩余朝向的三角形大家可以按需要进行设置。

.div {
    margin: 100px;
    height: 100px;
    width: 100px;
    border: 50px solid #000;
    border-top-color: blue;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.div {
    margin: 100px;
    height: 100px;
    width: 100px;
    border: 50px solid #000;
    border-top-color: blue;
    border-right-color: green;
    border-bottom-color: transparent;
    border-left-color: transparent;
}