<div class='triangle-rihgt'></div>

<div class='triangle-top'></div>

<div class='triangle-left'></div>

<div class='triangle-bottom'></div>

.triangle-rihgt{

	width: 0;

	height: 0;

	border-bottom:10px solid  transparent;

	border-top:10px solid  transparent;

        border-left: 20px solid  red;

}

.triangle-left{

	width: 0;

	height: 0;

	border-bottom:10px solid  transparent;

        border-top:10px solid  transparent;

	border-right: 20px solid  green;

}

.triangle-top{

	width: 0;

	height: 0;

	border-right:10px solid  transparent;

	border-left:10px solid  transparent;

	border-bottom: 20px solid  #333;

}

.triangle-bottom{

	width: 0;

	height: 0;

	border-right:10px solid  transparent;

	border-left:10px solid  transparent;

	border-top: 20px solid  #999;

}