A few days ago, we published the diagonal hero component, a variation of the hero component, which features inclined top/bottom edges. These kinds of effects can help break the "monotony" of a design based only on rectangular sections.

Let's do this! #

I've put together a video tutorial that explains different techniques that can be used to achieve the diagonal effect.

Join us on our YouTube channel for more tutorials!

The component we build in this tutorial is based on the CodyHouse framework.

There are different ways to create diagonal sections (isn't that always true in CSS?). In our case, we rely on the clip-path property.

The clip-path property allows you to clip the element it is applied to, by defining an area that acts as a mask. Specifically, the polygon function will enable you to specify sets of coordinates that determine the shape of the polygon. The part of the element that is outside the polygon won't be visible.

.component {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

In the example above, the coordinates return a rectangular shape. The first value of the coordinate is referring to the x-axis, the second one to the y-axis.

In our tutorial, we want to create a shape that differs from the one of the hero component; therefore we edit the coordinates to clip out parts of the hero.

.hero--diagonal {
  position: relative;
  background-color: transparent;

  &::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: calc(100% + 100px);
    clip-path: polygon(0% 0%, 100% 50px, 100% 100%, 0% calc(100% - 50px));
  }

  .hero__content {
    position: relative;
    z-index: 1;
  }
}

Instead of applying the clip-path to the hero element itself, we decided to target its pseudo-element.

If we clip the hero element directly, we end up displaying part of the background beneath the hero (the part that is clipped out). If we consider a layout with sections with different colors, we create triangles in between the sections:

By creating a ::before pseudo-element, we can extend the size of the hero background (covering a small part of the upper and lower sections), thus eliminating the extra triangles. The clip-path property is then applied to the pseudo-element to create the diagonal edges.

Done! 🎉

Feedbacks/suggestions? Get in touch on Twitter.