本文内容基于 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;
}