Probablemente ya sepa que puede hacer triángulos con CSS. Pero, ¿y si quieres poner una sombra detrás de eso? Desafortunadamente, el clásico truco del borde no cambia la forma del elemento, es solo un truco visual. Veamos un par de soluciones alternativas.
Solo usa Unicode
Hay caracteres triangulares en Unicode. Me gusta:
▲ ▼ ◀ ▶
Y mucho más.
Si usa eso como su triángulo, puede seleccionarlo y hacer todo tipo de fantasía.
<span class="triangle">▲</span>.triangle {
color: #BADA55;
text-shadow: 0 0 20px black;
}Color, sombras, tamaño, lo que sea. Incluso podrías ponerte más elegante. Si el triángulo no tiene la forma exacta que desea o no apunta en la dirección correcta, puede usar las cosas de transformación CSS3 para estirarlo o rotarlo. Aquí hay una demostración como esa:
Vea Pen myomvM de Chris Coyier (@chriscoyier) en CodePen.
Me gusta esta técnica, pero hay algunos problemas obvios. Una es que confiar en las características de transformación de CSS3 no le brinda un soporte de navegador muy profundo. Ciertamente no IE 8. Pero bueno, este artículo trata sobre sombras, así que eso es CSS3 de todos modos. Incluso los navegadores más antiguos pueden tener problemas con los iconos Unicode. Tan justa advertencia.
El método de caja doble
Suponiendo que estamos bien con CSS3, un método sería tener un cuadro contenedor con desbordamiento oculto y otro cuadro dentro de él que gira y cuelga de él. La parte que aún es visible formaría un triángulo. Luego, puede usar una sombra de cuadro en ambos cuadros para lograr una sombra en todos los sentidos.
<div class="triangle-with-shadow"></div>.triangle-with-shadow {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg); /* Prefixes... */
top: 75px;
left: 25px;
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}Observe que usamos un radio de extensión negativo en el padre para que la sombra salga solo de un lado. Aquí hay una demostración como esa:
Vea el Pen Triangle with Shadow de Chris Coyier (@chriscoyier) en CodePen.
Solo usa una imagen
No soy un gran admirador de esto, porque es una solicitud HTTP adicional u otra cosa para administrar en tu sprite. Y tendrá las “imágenes receptivas” (no se verá tan bien en pantallas densas en píxeles a menos que tenga varias versiones listas para eso y haga todo lo posible para solucionarlo). Las otras técnicas están esencialmente dibujadas con vectores, por lo que serán nítidas en cualquier entorno.
Pero, ya sabes, nadie morirá y obtendrás un buen soporte del navegador.
El futuro
Podrás usar filter: drop-shadow() para proyectar una sombra sobre la forma muy fácilmente. Aquí hay un artículo al respecto.