1. Web Design
  3. CSS

CSS Skills: Hero Sections With Asymmetrical Design

Scroll to top
Read Time: 4 min

In this tutorial, we’ll learn how to build hero sections with asymmetrical designs using CSS transforms and the clip-path property.

Modern UI designs are moving away from traditional rectangular boxes, instead coming with asymmetrical grids and layouts, diagonal elements, cut edges, curved sections, and so on.

Take, for example, Stripe’s website that, at the time of this writing, bases its design on skewed/slanted sections.

Hero section of Stripe's websiteHero section of Stripe's websiteHero section of Stripe's website
Hero section of Stripe's website
A curved section of Stripe's websiteA curved section of Stripe's websiteA curved section of Stripe's website
A skewed section of Stripe's website

Or, consider ContactPigeon’s website which uses a curve at the bottom of the hero section:

Hero section of ContactPigeon's websiteHero section of ContactPigeon's websiteHero section of ContactPigeon's website
Hero section of ContactPigeon's website

Methods for Creating Asymmetrical Designs

To build creative asymmetrical designs like these, we can use different front-end techniques—some are based on classic CSS approaches, while others take advantage of modern CSS properties. 

Here are a few of these techniques:

  • Images set either via <img> in HTML or backgrounds in CSS
  • SVG shapes
  • CSS gradients
  • CSS transforms
  • The CSS clip-path property

In a previous tutorial, we extensively covered a way to construct non-rectangular layouts with SVG shapes. To gain some practical knowledge, we also built a landing page.

Hero Sections with Asymmetrical Designs

As you’ve seen with the examples above, hero sections are always a great candidate for embedding asymmetrical regions as they can quickly catch visitors’ eyes and impress them. The main content of hero sections contains full-screen videos or background images, overlays with call-to-actions, etc.

We’ve already examined SVG shapes, so let’s discuss two alternative CSS ways to enhance full-screen hero sections with asymmetrical designs with a primary focus on the clip-path property. Either way, as you’ll check in the upcoming demos, we’ll continue defining absolutely positioned pseudo-elements as the holders of these elements.

Besides, manipulating things directly in CSS rather than depending on images is always preferred as it’s more flexible and quick to update things as you wish.

CSS Transforms

The CSS transform property includes the skew() function which allows us to skew elements in a two-dimensional space.

Consider the following example where we skew the ::before pseudo-element of the hero section:

Notice that we give oveflow: hidden to the hero section to prevent overflowing the skew to the next one.

If we want the skew to happen on the other side, we should pass a positive value to the skew() function.


Clip-path is a modern CSS feature that we’ve extensively covered in previous tutorials. It helps us cut away parts of an element and show only a specific portion of it. The visible area can be represented with different geometrical shapes like circles, ellipses, polygons, and rectangles.

Without a doubt, trying to remember or understand how to generate complex clip-path shapes can be tricky. To make our life easier, we can use a maker like Clippy or take advantage of Firefox’s built-in shape path editor.

The Shape Path Editor of the FirefoxThe Shape Path Editor of the FirefoxThe Shape Path Editor of the Firefox
The Shape Path Editor of the Firefox

In the demo below, we replicate the second example with the clip-path property with even more accurate results across all screens. 

Clip-path in actionClip-path in actionClip-path in action

From there, we can combine different polygon shapes to generate a custom design, like this:

Moving on, we generate a triangular shape: 

In this last demo, we draw a curve something we usually achieve through CSS with the border-radius property or radial gradients: 


As you can see, we have different ways to build asymmetrical designs: from curves to slanted backgrounds, all are possible through CSS without having to rely on designers for manipulating external images. Also, the existence of online editors for making SVG shapes, clip-path shapes, etc. provides a great source of help in generating the desired shape effortlessly. 

One nice thing about the CSS properties we discussed is that you can animate them and apply cool animations upon user interaction—for example on scroll or hover.

Last but not least, I’ve added all the demos of this tutorial to a CodePen Collection. Be sure to fork them and experiment! From time to time, I might add more demos here. So I might update the tutorial as well!

As always, thanks a lot for reading!

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.