Generador de cajas CSS3 con forma de flechas

By: Iván Dangerfield en jueves, diciembre 19, 2013
De nuevo deambulando por la red me he tropezado con una herramienta fascinante que me ha encantado gratamente descubrirla, trata de un generador CSS que te genera en 5 pasos una flecha en el cual puedes añadir texto dentro de ella con una llamada. Está creada mediante los selectores :after y :before que es una propiedad CSS3 de Pseudo-elementos, y se utiliza junto a la propiedad content: para añadir elementos antes o después del contenido, para originar un elemento, en resumidas cuentas. Enlace del generador: CSS Arrow Generator
El generador CSS Arrow Generator, te brinda la oportunidad de engendrar en cuestión de segundos una caja con forma de flecha, para añadir dentro de la caja, texto. Obviamente en este generador puedes personalizar y modificar el tamaño del triángulo de la flecha, el color, el tamaño del borde, y la posición de la flecha. Una vez hecho estos pasos, debajo del generador, podrás copiar el código CSS, generado por los pasos anteriormente o previamente modificados al gusto.
A continuación puedes ver una demostración:
Flecha con texto

1. Si te gusta la anterior caja de texto de ejemplo o de demostración, con forma de flecha y lo quieres añadir por ejemplo en la plataforma de Blogger, puedes hacerlo mediante los siguientes pasos que verás:

Añade el código CSS en tu plantilla antes de ]]></b:skin>

.caja_flecha {
position: relative;
background: #029FC4; /*Color del fondo */
border: 4px solid #c2e1f5; /*Tamaño del borde, tipo de borde y color del borde */
width: 500px; /*Ancho de la caja */
height: 65px; /*Altura de la caja */
font-family: Consolas, sans-serif; /*Tipo de fuente */
font-size: 42px; /*Tamaño de la fuente */
font-weight: bold; /*Grosor de la fuente */
line-height: 55px; /*Altura de la línea */
color: whitesmoke; /*Color de la fuente */
text-align: center; /*Alineación de la fuente */
margin: 0 auto; /*Centrar la caja */
text-transform: uppercase;  /*Transformación de la fuente */
text-shadow: 0 2px white, 1px 3px #666; /*Sombras en el texto */
}
.caja_flecha:after, caja_flecha:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.caja_flecha:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #029FC4;
border-width: 30px;
left: 50%;
margin-left: -30px;
}
.caja_flecha:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 36px;
left: 50%;
margin-left: -36px;
}

Y para añadir la caja usa el HTML dónde quieras que se vea:

<div class="caja_flecha">Texto_a_escribir_dentro_de_la_caja</div>

Get free premium widgets for your blog and website.