Search code examples
htmlcsscss-shapes

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.

enter image description here

I've whittled away the code by deleting chunks via the inspector, and got it down to this:

enter image description here

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. :)

Solution

  • It's just a rotated square in the form of a ::before pseudo element.

    As you can see, the element is a square (same height/width). The element is absolutely positioned with left: 50% and a negative margin-left of -31px (half the width) for horizontal centering. Finally, transform: rotate(-45deg) is used to rotate the square.

    Here is the styling used:

    .home-testimonial-wrapper:before
.home-cta-area::before, {
    display: block;
    width: 62px;
    height: 62px;
    background: #253031;
    position: absolute;
    top: -15px;
    left: 50%;
    margin: 0 0 0 -31px;
    z-index: 5;
    content: "";
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

    Aside from this, if you're interested in seeing how to make a triangle using CSS, see this answer.