Complement for Abesh's traffic lights in SAP UI5

colorcircle-shapes.css

/* 
This is an alternative colorcircle.css for the following Gist: https://gist.github.com/abesh/9504351

This alternative CSS displays the different colors (red, yellow/orange, green) 
as different shapes (rounded rectangle, triange, circle)
This makes them less ambigous especially for color-blind folks 
Tested in Chrome and IE10
*/

.circlered-text {
  width:46px;
}
.circlered-text:after {
  content: "";
  display: block;
  width: 40px;
  height:0;
  padding-bottom: 40px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  border-radius: 5px;
  background-color: #ff0000;
  margin:3px; 
}
.circlered-text div {
  float: left;
	width: 46px;
	height: 40px;
	line-height: 40px;
	color: white;
	text-align: center;
}
 
.circlegreen-text {
  width:46px;
}
.circlegreen-text:after {
  content: " ";
  display: block;
  width: 40px;
  height:0;
  padding-bottom: 40px;
  -moz-border-radius: 20px; 
  -webkit-border-radius: 20px; 
  border-radius: 20px;
  background-color: #32CD32;
  margin:3px; 
}
.circlegreen-text div {
  float: left;
	width: 46px;
	height: 40px;
	line-height: 40px;
	color: white;
	text-align: center;
}
 
.circleyellow-text {
  width:46px;
}
.circleyellow-text:after {
  content: "";
  display: block;
	background: transparent;  
  border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 40px solid #ffbf66;
  margin:3px; 
}
.circleyellow-text div {
  float: left;
	width: 46px;
	height: 40px;
	line-height: 55px;
	color: white;
	text-align: center;
}