Títulos para gadgets con efecto de banda plegada doble

A diferencia del truco anteriormente visto, ahora usaremos otro método para no tener que tocar la parte HTML y que consistirá en usar :after y :before para insertar los triángulos terminales.

La clase que controla los gadgets de la barra lateral en las plantillas estándar es .sidebar .widget y los rótulos de los títulos además aparecen con encabezamiento h2, así que esta será la clase que usaremos: .sidebar .widget h2

Si tienes una plantilla que use otro nombre para la clase de los gadgets, tendrás que obtenerla echando un vistazo a tu código HTML.

Como ves, el código sólo crea un fondo para el rótulo, lo hace de un ancho mayor que la columna del gadget (106%, dependerá del ancho de la sidebar de tu plantilla) y lo desplaza a la izquierda con un margin-left negativo.

Con before y after completamos el asunto añadiendo respectivamente a cada extremo un triángulo y posicionándolo con absolute.

Para ello añadimos el siguiente código CSS antes del cierre SKIN (]]></b:skin>):

.sidebar .widget h2 {
display:block;
position: relative;
width: 106%;
height: 2em;
margin: 5px 0 0 -28px;
padding:2px 4px 4px 40px;
text-transform: none;
line-height:1.10em;
background: #666;
border: 1px solid #444;
border-radius:8px 8px 0 0;
}

.sidebar .widget h2::before {
display: block;
position: absolute;
left: -12px;
bottom: -12px;
z-index: -1;
content: "";
height: 0px;
width: 0px;
border-color: transparent #444 transparent transparent;
border-style: solid;
border-width: 12px;
}

.sidebar .widget h2::after {
display: block;
position: absolute;
right: -12px;
bottom: -12px;
z-index: -1;
content: "";
height: 0px;
width: 0px;
border-color: transparent transparent transparent #444 ;
border-style: solid;
border-width: 12px;
}