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

回答1:

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.

回答2:

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.

回答3:

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!

回答4:

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;
}

来源：https://stackoverflow.com/questions/28258275/css-how-is-this-arrow-made

标签

html

css

css-shapes