How to make a box with arrow in CSS?

Like this : #pointer{ border:solid 10px transparent; border-right-color:#FFF; } Demo : jsfiddle.net/Zaukt/1.

1 Nice. Would't even imagine this was possible with CSS... – holodoc Aug 7 at 10:41 Great but The arrow'a top is not sharp. And it's very good but it would be much better if we can do without empty elements.

– Jitendra Vyas Aug 7 at 10:41 Without adding is it possible to do woth before:? – Jitendra Vyas Aug 7 at 10:47 I'm not aware of such a method, sorry. – Stack 101 Aug 7 at 11:00 @holodoc: The question linked to by Floern has the scoop.

– BoltClock? Aug 7 at 11:17.

Chris Coyier has an excellent roundup of the possible shapes built in CSS using a single element (and before/afters): css-tricks.com/examples/ShapesOfCSS.

You can make use of span if you don't want to use a div. Span#pointer{border:solid 10px transparent;border-right-color:#fff;position:absolute;margin:-85px 0 0 -20px;} jsfiddle.net/SSKwn.

My point was empty element is not semantically good not to change div to span – Jitendra Vyas Aug 7 at 11:08.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.