css 倒三角制作及原理

原理：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;

就会出现到三角的效果