纯css画三角形的原理

首先我们给一个div加上不同颜色的边框看下效果

.icon{
	width: 0;
	height: 0;
	border-top: 20px solid #5a57c2;
	border-right: 20px solid #c257b9;
	border-bottom: 20px solid #5f8a09;
	border-left: 20px solid #e5e541;
}

很明显，每一个方向的边框在这个div中都是一个三角形，那么，我们只需要在其他的位置边框颜色定义为透明就可以画出需要的三角形了
比如

.icon{
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #e5e541;
}

.icon{
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #5f8a09;
	border-left: 20px solid transparent;
}

.icon{
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-right: 20px solid #c257b9;
	border-bottom: 20px solid transparent;
	border-left: 20px solid transparent;
}

.icon{
	width: 0;
	height: 0;
	border-top: 20px solid #5a57c2;
	border-right: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid transparent;
}