Etiquetas CSS: de qué forma diseñar la etiqueta de la publicación

Las etiquetas son una forma de agrupar publicaciones relacionadas en WordPress. Son afines a las categorías, pero en general se utilizan para describir publicaciones con mucho más aspecto.
Esta demostración le mostrará cómo diseñar la etiqueta del blog que por norma general se pone en la parte de abajo de la página.

Etiquetas CSS: cómo diseñar la etiqueta de la publicación

Primero, establezcamos el estilo del elemento de anclaje: agregaremos bordes y rellenos, así como ciertas esquinas redondeadas en el lado derecho.

.tags a     
    display: inline-block;
    height: 24px;
    line-height: 24px;
    position: relative;
    margin: 0 16px 8px 0;
    padding: 0 10px 0 12px;
    background: #777;    
    -webkit-border-bottom-right-radius: 3px;    
    border-bottom-right-radius: 3px;
    -webkit-border-top-right-radius: 3px;    
    border-top-right-radius: 3px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    color: #fff;
    font-size: 12px;
    font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    font-weight: bold;
    

Luego agregamos 2 trucos CSS, por servirnos de un ejemplo Triángulo CSS Con Círculos CSSPara llevar a cabo esto, empleamos los pseudo-elementos: before y: after.

.tags a:before 
    content: "";
    position: absolute;
    top:0;
    left: -12px;
    width: 0;
    height: 0;
    border-color: transparent #3243A5 transparent transparent;
    border-style: solid;
    border-width: 12px 12px 12px 0;        
    

.tags a:after 
    content: "";
    position: absolute;
    top: 10px;
    left: 1px;
    float: left;
    width: 5px;
    height: 5px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
    -webkit-box-shadow: -1px -1px 2px rgba(0,0,0,0.4);
    box-shadow: -1px -1px 2px rgba(0,0,0,0.4);
    

Descarga demo