Drop Shadow In CSS Triangle

Question

I have created essentially a large arrow pointing right.

<div style="
font-size: 0px; line-height: 0%; width: 100px;
border-bottom: 80px solid #8cb622;
border-right: 62px solid #dadbdf;
"></div>


<div style="
font-size: 0px; line-height: 0%; width: 100px;
border-top: 80px solid #8cb622;
border-right: 62px solid #dadbdf;
"></div>

Now I know this isn't "proper" but I am just testing right now.

I am wondering if there is a way that I can use this border technique and still somehow place a drop shadow on the leading bottom edge of the arrow. I was thinking of placing another div underneath it, but for this technique to work the other borders need to be visible.

If this can't be done using the border technique am I forced to use an image as the front of this arrow.

Thanks

Answer 1

I believe it is box-shadow but that is likely to assume it works on the box model and probably won't compute the geometry created by the borders.

Answer 2

You might want to consider using a Canvas to do this, which works cross platform very well with ExplorerCanvas included for MSIE compatibility (and of course is supported natively in WebKit & Gecko).