CSS? How is this arrow made?
This is driving me insane. I’ve been using the Firefox inspector to try to figure out how this arrow was made (below) on the Headway site.
I’ve whittled away the code by deleting chunks via the inspector, and got it down to this:
No matter where I inspect, I can not find any such shape. No background image, no glyphs, nothing. It hardly even matters at this point, but I’m pulling my hair out trying to figure out how they did this!
Any CSS gurus care to take a look and chime in? For the sake of learning. :)
It’s just a rotated square in the form of a
::before pseudo element.
As you can see, the element is a square (same
width). The element is absolutely positioned with
left: 50% and a negative
-31px (half the width) for horizontal centering. Finally,
transform: rotate(-45deg) is used to rotate the square.
Here is the styling used:
Aside from this, if you’re interested in seeing how to make a triangle using CSS, see this answer.