Sombra paralela CSS para la flecha dibujada CSS

Quiero la flecha que aparece cuando un div está suspendido here para también soltar una sombra. La flecha se extrae de css:Sombra paralela CSS para la flecha dibujada 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); 
}

El ajuste de sombra 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 en sólo pegar el ajuste en la flecha de sombra es que la sombra se aplica a todo el lapso cuadro y resultados en una sombra de cuadro en lugar de una sombra paralela para la flecha.

P.S. Quiero intentar tanto como sea posible para no usar explorercanvas, ya que estoy tratando de minimizar las etiquetas de script en el html. Sin embargo, si es necesario, proporcione el código.

Fuente

2011-04-05 UrBestFriend

Aplicar la sombra de caja al triángulo de borde css no funcionará, solo lo aplicará al cuadro de elemento completo.

Usted puede lograr lo que estamos tratando de hacer cambiando triángulo fronterizo css en un div cuadrado, girándolo 45 grados utilizando CSS3 y luego aplicar el box-shadow

-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
transform: rotate(45deg); 
position: absolute;

Editar: Actualizado

Editar: consulte el siguiente enlace para otro enfoque con css y content:after

http://css-tricks.com/triangle-with-shadow/

Fuente

2011-04-05 09:25:40 Blowsie

+1. Esto es probablemente lo más cercano que va a obtener usando CSS puro. Por supuesto, solo funciona si tu triángulo tiene una esquina en ángulo recto. También necesitarás jugar con el índice z para asegurarte de que la caja girada se encuentra en capas detrás de la caja principal, pero delante de la sombra de la caja principal (hmm, ¿complicado?). Finalmente, si está soportando IE, ya estará usando un estilo 'filter' para la sombra; tenga en cuenta cómo los filtros interactúan (o no) al aplicar la rotación también. – Spudley

Ooh, eso es genio. –

Además, no sabía que 'BasicImage' admitía roataiones de 45 grados; Pensé que tenías que usar el filtro 'Matrix' para algo que no fuera 90/180/270. Ref http://msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx, pero si tiene un enlace mejor, estaría interesado en verlo. – Spudley

Me temo que las sombras solo se aplican a la caja del elemento, en lugar del ángulo de las esquinas del borde. Si quieres una flecha como esta con una sombra paralela, me temo que tendrás que hacerla como una imagen PNG, con la sombra paralela en la imagen.

CSS generalmente solo produce cuadros cuadrados. El truco de la frontera para hacer una flecha puntiaguda aquí con CSS es un truco ingenioso.

Fuente

2011-04-05 09:16:31

Gracias a Blowsie por la respuesta original que me llevó a la siguiente implementación. Aquí hay un working jsfiddle implementation 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 la caja se solapa con la flecha a continuación, la ilusión se rompe. Puede intentar solucionar esto cambiando el índice z de la flecha que está detrás del cuadro, pero esto hará que la sombra paralela del cuadro se represente en la parte superior de la flecha. Agregue suficiente relleno al contenido de la caja para que esto no suceda.

Fuente

2012-04-12 19:51:23

No he probado otros navegadores, pero me di cuenta de que CSS Arrow Please utiliza un truco poco

El uso de esta sintaxis en la caja padre también agregará un dropshadow a la "flecha" generada:

-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));

Pero el uso de esta sintaxis no?:

-webkit-box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.04);

Fuente

2013-03-03 17:12:34 ProVega

Funciona bien ..... – Fergus

Otra forma de lograr la flecha con la sombra, que trabajará para todos los navegadores es el uso de html carácter triángulo en Unicode.

HTML:

<span class="arrow">▶</span>

CSS:

.arrow { 
    color: red; 
    text-shadow: 0 0 20px black; 
    transform: scaleY(1.4) 
}

Desde que se representa como texto normal puede aplicar la propiedadsombra de texto. Para personalizar las dimensiones de la flecha (desea agregar ancho o alto adicional o inclinar la flecha) propiedad de transformación css3 es la clave. Aquí está la referencia con caracteres html: http://www.copypastecharacter.com/graphic-shapes Disfrute

Fuente

2015-10-29 11:26:26

Sombra paralela CSS para la flecha dibujada CSS

Respuesta

Cuestiones relacionadas