Crear etiquetas con CSS3

Vamos a ver como realizar una etiqueta de las típicas que tienen los productos de las tiendas con sus precios, datos, etc…pero adaptadas a CSS3, es decir con un triángulo, un círculo y un rectángulo con 2 esquinas redondeadas vamos a poder realizar una etiqueta típica de esas. Esto ,lo ví en guiabreve, pero no era exactamente lo que buscaba, por ello, me puse a trastear con el código y conseguí lo que buscaba.

Vamos a ello:

/*crear etiquetas*/
.prueba li { 
    height:24px;
	color:#FFF;
	line-height:24px;
	width:90px;
	margin-right:20px;
	background-color:#0089e0;
	margin-left:7px;
	margin-bottom:4px;
    -moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;
	border-bottom-right-radius:4px;
	-moz-border-radius-topright:4px;
	-webkit-border-top-right-radius:4px;
	border-top-right-radius:4px;}

Creamos el triángulo

/*creamos triangulo*/
.prueba li a{color:#FFF; font-weight:bold; padding-left:15px;}
.prueba li a:before { 
    content:"";
    border-color:transparent  #0089e0 transparent transparent;
	border-style:solid;
	border-width:17px 17px 17px 0px;/*12px 12px 12px 0;*/
	float:left;
	margin-top:-5px;/*0*/
	margin-left:-19px;/*-12px*/
	width:0px;
	height:0px;}

Creamos el círculo

/*creamos circulo*/	
.prueba li a:after {
	content:"";
    float:left;
    width:4px;
	height:4px;
	margin-top:10px;
	margin-left:-4px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	background:#fff;
	-moz-box-shadow:-1px -1px 2px #004977;
	-webkit-box-shadow:-1px -1px 2px #004977;
	box-shadow:-1px -1px 2px #004977;
	}
.prueba li a:hover{ color:#666;}

Os invito a trastear con el código y a dejar vuestras opiniones, dudas y comentarios