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/