🎉 Black Friday deal! 50% off your first year of CodyHouse Pro →

Diagonal Containers in CSS

In this tutorial, we'll take a look at how to create full-width, diagonal sections in CSS using the clip-path property.

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.

👋 First time you hear about 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.

clip-path example
clip-path coordinates example

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:

clip-path applied to hero section

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.

clip-path applied to pseudo-element

Done! 🎉

Feedbacks/suggestions? Get in touch on Twitter.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us