Adding a Arrow mark to a Border through CSS

Question

this is my CSS of a DIV Tag for a Marker /ToolTip .

<div class="flotr-mouse-value">
position:absolute; 
z-index:1;
background: #FFD772;
height: 75px;
-moz-box-shadow: 3px 3px 3px #666;
 -webkit-box-shadow: 3px 3px 3px #666;
position: absolute;
box-shadow: 3px 3px 3px #666;
left: 50px;top: 50px;
width: 150px;
height: 80px;
</div>

Waht i want is that , to have a down arrow at the bottom of the border similar to as shown here http://www.tiikoni.com/tis/view/?id=fa381ec

I have tried modifying the below attribute , but of no use

border-bottom:

Answer 1

You can make a triangle by using code like:

border-color: #ff0 transparent transparent transparent;

It looks like this:

Here's the code for that example http://jsfiddle.net/hyH48/

There are a lot of limitations (for isntance the box shadow won't work for the triangle), but it doesn't use any images, and is pure CSS.

Answer 2

I used @RichBradshaw's answer but elaborated on it. While he's correct in that it's not possible (or at least very difficult) to add a shadow to the arrow, I achieved the effect by utilizing the :before and :after pseudo elements. Use Rich's code within a :after selector, and then in the :before selector, create the same arrow, offset in the direction you want your shadow, with a transparent color.

Here is an example! jsfiddle