原理
先上口诀:宽高为0,一边为0,两边透明。
元素的border的形成机制是:
在盒子四边由4个三角形 拼接而成,最先呈现的是每个三角形底部的内容,当border-width变大后,每个三角形的剩余部分会渐渐出现;
当盒子内容有宽高时,会遮住每个三角形底部之外的部分;
比如
css
width: 40px;
height: 40px;
border-width: 50px;
border-style: solid;
border-color: red yellow green blue;
当border-width设置过小时,就是平时的场景(只看到每个三角形底部区域):
css
width: 40px;
height: 40px;
border-width: 1px;
border-style: solid;
border-color: red yellow green blue;
当盒子宽高设置为0后,每个三角形全部呈现:
css
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: red yellow green blue;
如果有一边不设置border-width,就只有三个三角形:
css
width: 0;
height: 0;
border-width: 30px 30px 30px 0;
border-style: solid;
border-color: red yellow green #fff;
如果将上下两边的color设置为透明,不就是只看到一个三角形吗:
css
width: 0;
height: 0;
border-width: 30px 30px 30px 0;
border-style: solid;
border-color: transparent yellow transparent #fff;
不难发现,不设置border-width那一边就是三角形的方向,三角形方向的方向的邻近两边需要设置透明。
实现口诀:宽高为0,一边为0,两边透明
css
width: 0;
height: 0;
border-width: 30px 30px 30px 0;
border-style: solid;
border-color: transparent yellow transparent #fff;