其实很早就了解到可以利用border属性来画三角形,但是当时没认真思考原理和总结规律,写下这篇博客记录下我的想法。
🤔两个结论
分界线原则
:假如把有宽度的border靠外的一边叫做外边,靠内的一边叫做内边,则各个外边的交点与相对应各个内边交点的连线就是各border之间的分界线
内边的确定依赖于原div的各边
外边的确定依赖于原div的各边以及border的宽度
一刀切原则
:某方向的border宽度如果为0,边框的样式会表现出一刀切的样子
🫣举例论证
<div></div>
div {
width: 50px;
height: 50px;
border: 20px solid red;
}
常规情况下我们会把边框宽度设的很小,看着像是矩形,但是当我们增大边框宽度
<div></div>
div {
width: 50px;
height: 50px;
border: 20px solid;
border-color: red blue black green;
}
我们可以很清楚的看到四条边框的分界线
<div></div>
div {
width: 50px;
height: 50px;
border: 20px solid red;
}
当原div宽高都为0时,我们可以把div看作一个点
div {
width: 50px;
height: 50px;
border: solid;
border-color: red blue black green;
border-top-width: 20px;
border-right-width: 0;
border-bottom-width: 20px;
border-left-width: 20px;
}
此时右边框宽度为0,我们可以想象宽度为0时就是一刀切掉那部分。
此时右边框宽度为10px,图中的样式再一次佐证了我们的想法
div {
width: 50px;
height: 50px;
border: solid;
border-color: red blue black green;
border-top-width: 20px;
border-right-width: 10px;
border-bottom-width: 20px;
border-left-width: 20px;
}
div {
width: 50px;
height: 50px;
border-radius: 50%;
border: solid;
border-color: red blue black green;
border-top-width: 20px;
border-right-width: 20px;
border-bottom-width: 20px;
border-left-width: 20px;
}
加个圆角就可以实现环状图的样式
如果让边框透明显示
div {
width: 50px;
height: 50px;
border: solid;
border-color: red transparent black green;
border-top-width: 20px;
border-right-width: 20px;
border-bottom-width: 20px;
border-left-width: 20px;
}
三边都透明的话就会形成一个梯形
div {
width: 50px;
height: 50px;
border: solid;
border-color: transparent transparent transparent green;
border-top-width: 20px;
border-right-width: 20px;
border-bottom-width: 20px;
border-left-width: 20px;
}
那么当div宽高为0时,不就得到了一个三角形
div {
width: 0;
height: 0;
border: solid;
border-color: transparent transparent transparent green;
border-top-width: 20px;
border-right-width: 20px;
border-bottom-width: 20px;
border-left-width: 20px;
}
再来个稍微难点的
div {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
我们一步一步的倒推
div {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid green;
}
再推一步
div {
width: 50px;
height: 50px;
border-top: 100px solid red;
border-right: 100px solid green;
}
我们发现,边框始终符合我们的一刀切原则
和分界线原则