原理:css的每条边相交的地方都是三角,如果将容器的宽高设置为0,而边框非常粗,并且每条边颜色不同,就会得到下面的效果:
//css代码:
.test{
width:0px;
height:0px;
border:100px solid red;
border-top-color:red;
border-bottom-color:blue;
border-right-color:orange;
border-left-color:black;
}
如果将其中三条边的透明度设置为0,即将上面的代码的三条边改成:
border-bottom-color:transparent;
border-left-color:transparent;
border-right-color:transparent;
就会出现到三角的效果