CSS Drop Shadow para CSS flecha dibujada
css3 (5)
Quiero que la flecha que aparece cuando se divisa un div para que también aparezca una sombra. La flecha se extrae de CSS:
.arrow {
position:absolute;
margin-top:-50px;
left:80px;
border-color: transparent transparent transparent #ccff66;
border-style:solid;
border-width:20px;
width:0;
height:0;
z-index:3;
_border-left-color: pink;
_border-bottom-color: pink;
_border-top-color: pink;
_filter: chroma(color=pink);
}
La configuración de la sombra que quiero aplicar es:
-moz-box-shadow: 1px 0px 5px #888;
-webkit-box-shadow: 1px 0px 5px #888;
box-shadow: 1px 0px 5px #888;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color=''#888888'')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color=''#888888'');
El problema al simplemente pegar la configuración de la sombra en la flecha es que la sombra se aplica a todo el cuadro de intervalo y da como resultado una sombra de cuadro en lugar de una sombra para la flecha.
PS Quiero intentar tanto como sea posible no usar explorercanvas , ya que estoy tratando de minimizar las etiquetas de script en el html. Sin embargo, si es necesario, por favor proporcione el código.
Gracias a Blowsie por la respuesta original que me llevó a la siguiente implementación. Aquí hay una implementación jsfiddle para Chrome. El CSS relevante:
/* Make an arrow */
.arrow{
background-color: pink;
box-shadow: 3px 3px 4px #000;
width: 30px;
height: 30px;
/* Translate the box up by width / 2 then rotate */
-webkit-transform: translateY(-15px) rotate(45deg);
}
Advertencia
Si el contenido de su caja se superpone a la flecha, la ilusión se rompe. Puede intentar solucionar esto cambiando el índice z de la flecha para que esté detrás del cuadro, pero esto hará que el cuadro de sombra se muestre sobre la flecha. Agregue suficiente relleno al contenido de la caja para que esto no suceda.
La aplicación de la sombra del cuadro al triángulo del borde css no funcionará, solo se aplicará a todo el cuadro de elementos.
Puede lograr lo que está tratando de hacer cambiando su triángulo de borde css a un div cuadrado, girándolo 45 grados usando css3 y luego aplicando la sombra de la caja
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
Edición: Actualizado
Edición: vea el enlace a continuación para ver otro enfoque utilizando content css y :after
Me temo que las sombras paralelas solo se aplican al cuadro de elementos, en lugar del ángulo de las esquinas de los bordes. Si desea una flecha como esta con una sombra paralela, me temo que tendrá que hacerlo como una imagen PNG, con la sombra paralela en la imagen.
CSS generalmente solo produce cajas cuadradas. El truco de la frontera para hacer una flecha puntiaguda aquí con CSS es un truco inteligente.
No he probado otros navegadores, pero me di cuenta de que CSS Arrow Please utiliza un pequeño truco
El uso de esta sintaxis en el cuadro principal también agregará un dropshadow a la "flecha" generada:
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
Pero usando esta sintaxis no ?:
-webkit-box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.04);
Otra forma de lograr la flecha con la sombra, que funcionará para todos los navegadores, es usar el carácter del triángulo html en Unicode.
HTML:
<span class="arrow">▶</span>
CSS:
.arrow {
color: red;
text-shadow: 0 0 20px black;
transform: scaleY(1.4)
}
Dado que se representa como texto regular, puede aplicar la propiedad text-shadow . Para personalizar las dimensiones de la flecha (desea agregar ancho o altura extra o sesgar la flecha) la propiedad de transformación css3 es la clave. Aquí hay una referencia con caracteres html: http://www.copypastecharacter.com/graphic-shapes Disfrute