CSS? How is this arrow made?

Question

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

score 6 · Accepted Answer · edited May 23 '17 at 11:51

6

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.

edited May 23 '17 at 11:51

Community

1
1

answered Feb 01 '15 at 00:52

Josh Crozier

233,099
56
391
304

Something must be wrong with the Firefox inspector. No matter what I click on, I never see that CSS pop up on the right hand side. – CaptSaltyJack Feb 01 '15 at 00:58
Stuff like that (45-degree cuts) is usually done using transparent borders. – Shomz Feb 01 '15 at 01:00
@CaptSaltyJack For what it's worth, [this is what I get in Firefox](http://i.stack.imgur.com/AAKgZ.png). – Josh Crozier Feb 01 '15 at 01:02
@Shomz The question was **How is *this* arrow made?** I linked to [the canonical CSS triangle question](http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work), though. – Josh Crozier Feb 01 '15 at 01:03
Agreed, just saying. Gave you an upvote. Nope, wasn't my downvote. – Shomz Feb 01 '15 at 01:04
1

@JoshCrozier Interesting! I can't click on `::before` in the code pane in the inspector, I *have* to click on it on the horizontal bar: http://i.imgur.com/HSG6hbk.png. Otherwise I won't get the CSS rule on the right. I'm gonna report that as a bug in FF. Thanks for your help!! – CaptSaltyJack Feb 01 '15 at 01:07
1

`::before` and after `::after` pseudo elements aren't technically part of the DOM. For a quite a while, no browser showed them when inspecting elements. I remember the day they started showing up in the elements pane on chrome canary. It was a good day. – rlbaxter Feb 01 '15 at 01:22

score 3 · Answer 2 · edited Feb 01 '15 at 00:59

3

You can make a triangle by playing with borders of a zero width/height div:

.triangleDiv {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 100px 100px 100px;
        border-color: transparent transparent #000000 transparent;
    }

<div class="triangleDiv"></div>

Just adjust the border-widths to get the size you want. No need for transforms. By adjusting which borders have width, you can 'rotate' the triangle.

edited Feb 01 '15 at 00:59

Shomz

37,421
4
57
85

answered Feb 01 '15 at 00:57

sideroxylon

4,338
1
22
40

Nice one, hope you don't mind me adding it as a snippet. – Shomz Feb 01 '15 at 00:59

score 1 · Answer 3 · answered Feb 01 '15 at 04:48

The previous answers are good!

Just wanted to add, for design elements like that I always use one of two things.

Pseudo element to create the design feature ( as described above )
Pseudo element containing the design feature as an svg

Hope that helps!

score 0 · Answer 4 · answered Feb 01 '15 at 00:58

You can do what they've done with rotating the square, but a more common solution is to use the border property:

.example {
  position: relative;
}
.example:after {
  content: '';
  display: block;
  position: absolute;
  top: 0; /* or wherever */
  left: 0; /* or wherever */
  border: 10px solid transparent;
  border-bottom-color: #000;
}

CSS? How is this arrow made?

4 Answers4

Linked