CODEWITHSUNDEEP
css
Iain
Iain

Reputation: 1734

CSS Div With Arrow Centre

I'm wondering how to go about creating a div with an arrow attached to the bottom pointing downwards. I can achieve that effect like so: http://jsfiddle.net/hyH48/.

However, I'm not sure how to ensure that the arrow is in the centre of the div? In the fiddle, it is positioned using:

left: 20px;

But can I dynamically set this to appear in the centre? Obviously with people viewing the page on different screen resolutions I can't know in advance the integer to put here.

Please help?

Upvotes: 1

Views: 93

Answers (2)

Mic Alexander
Mic Alexander

Reputation: 103

What you what to do is add left:50%; and margin-left:20px;to #mybox:after. See http://jsfiddle.net/hyH48/1470/

Upvotes: 0

kalley
kalley

Reputation: 18462

If you know how wide the arrow will be, you can do this (fiddle):

left: 50%;
margin-left: -20px; /* -(width/2)px */

Otherwise, you can use transforms with left: 50%:

left: 50%;
transform: translateX(-50%);

Upvotes: 5

Related Questions