border 边框的边缘之间,效果是切割彼此一半
.smm-box {
width: 100px;
height: 100px;
border: 10px solid transparent;
border-top-color: red;
border-left-color: aqua;
border-bottom-color: blueviolet;
border-right-color: aquamarine;
}
当不没有内容的宽高的时候,效果如下
.smm-box2 {
width: 0;
height: 0;
border: 60px solid transparent;
border-top-color: red;
border-left-color: aqua;
border-bottom-color: blueviolet;
border-right-color: aquamarine;
}
将其他边框设置为透明色,得到一个三角形
.smm-box3 {
width: 0;
height: 0;
border: 60px solid transparent;
border-left-color: aqua;
}