CSS Drop Shadow for CSS drawn arrow

Question

I want the arrow that appears when a div is hovered here to also drop a shadow. The arrow is drawn from 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);
}

The shadow setting I want to apply is:

-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');

The problem in just pasting the shadow setting into the arrow is that the shadow applies to the entire span box and results in a box shadow instead of an drop shadow for the arrow.

P.S. I want to try as much as possible to not use explorercanvas, since I'm trying to minimize script tags in the html. However, if its a must please do provide the code.

Answer 1

Applying the box shadow to the css border triangle will not work, it will only ever apply it to the whole element box.

You can achieve what you are trying to do by changing your css border triangle into a square div, rotating it 45 degrees using css3 and then applying the box-shadow

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

Edit: Updated

Edit: See the link below for another approach using css content and :after

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

Answer 2

I haven't tested other browsers, but I noticed that CSS Arrow Please uses a neat little trick

Using this syntax on the parent box will also add a dropshadow to the generated "arrow":

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

But using this syntax will not?:

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

Answer 3

Credit to Blowsie for the original answer that led me to the following implementation. Here is a working jsfiddle implementation for Chrome. The relevant CSS:

/* 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);
}​

Caveat

If the content of your box overlaps the arrow then the illusion is broken. You might try working around this by changing the z-index of the arrow to be behind the box but this will cause the box drop-shadow to be rendered on top of the arrow. Add sufficient padding to the box content so that this doesn't happen.

Answer 4

I’m afraid drop shadows only apply to the element box, rather than the angle of the border corners. If you want an arrow like this with a drop-shadow, I’m afraid you’ll have to make it as a PNG image, with the drop shadow in the image.

CSS generally only produces square boxes. The border trick to make a pointy arrow here with CSS is a clever hack.