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.