SOURCE

<div class="wrapper">
	<div class="triangle-complete-border triangle-complete-wh"></div>
	<div class="triangle-complete-border"></div>
	<div class="triangle triangle-top"></div>
	<div class="triangle triangle-left"></div>
	<div class="triangle triangle-right"></div>
	<div class="triangle triangle-bottom"></div>
	<div class="right-triangle"></div>
</div>

.wrapper {
	text-align: left; //居左
}
.wrapper div {
	display: inline-block;
}         
.triangle-complete-border { /*当内联块width/height为零时，border叠加效果*/
	width: 0;
	height: 0;
	margin: 0 auto;
	border-top:solid 50px #F44336;
	border-left:solid 50px #00aabb;
	border-right: solid 50px #9C27B0;
	border-bottom:solid 50px #E91E63;
}
.triangle-complete-wh {
	height:50px;
	width:50px;
	background-color:#3F51B5;
}
.triangle {
	width: 0;
	height: 0;
	border: solid 50px transparent;
	margin:0 auto;
}
/*三角形方向向下*/
.triangle-top {
	border-top-color: #F44336 ;
}
/*三角形方向向右*/
.triangle-left {
	border-left-color: #00AABB;
}
/*三角形方向向左*/
.triangle-right {
	border-right-color: #9C27B0;
}
/*三角形方向向上*/
.triangle-bottom {
	border-bottom-color: #E91E63;
}
/*直角三角形绘制*/
.right-triangle {
	width: 0;
	height: 0;
	border-right: 100px solid #FF5722;
	border-bottom: 100px solid transparent;
}