CSS Drop Shadow для рисованной стрелки CSS

Я хочу, чтобы стрелка, которая появляется при наведении курсора на div здесь , также отбрасывала тень. Стрелка нарисована из 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);
}

Параметр тени, который я хочу применить, следующий:

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

Проблема при простой вставке параметра тени в стрелку заключается в том, что тень применяется ко всему блоку диапазона и вместо этого приводит к тени блока. тени для стрелки.

PS Хочу по возможности постараться не использовать explorercanvas , так как я пытаюсь свести к минимуму теги скрипта в html. Однако, если это необходимо, укажите код.