制作三角形


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; }

发表回复