Reply To: Put Arrow On Corner CSS

[Paulie_D]

Yep.

You play with the position numbers to get it located correctly. If you set them back to zero it will just hang outside the box.

The z-index is there to make sure it sits behind the main element. If you don’t do that it will sit in front and possibly hide the
content of the box.

To see what I mean, try removing the x-index property and change the border-top color to red.

The shape of the arrow is determined by the border sizes so you can play with that too. It’s actually very flexible.

Here…see what I mean.: http://codepen.io/anon/pen/rqlmv