CODEWITHSUNDEEP
css
user663724
user663724

Reputation:

Adding a Arrow mark to a Border through CSS

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:

Upvotes: 2

Views: 23193

Answers (3)

jmstone617
jmstone617

Reputation: 5707

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

Upvotes: 3

sandeep
sandeep

Reputation: 92803

yes, you can do it from css check this

arrow with border on it: 

.arrow{
     height: 20px;
     width: 20px;
     margin-left:30px;
    margin-top:-11px;
    background:red;
    -moz-transform:rotate(45deg);
    border-right:1px solid #000;
    border-bottom:1px solid #000;
}

Upvotes: 0

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

You can make a triangle by using code like:

border-color: #ff0 transparent transparent transparent;

It looks like this:

enter image description here

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.

Upvotes: 9

Related Questions