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.
Or, consider ContactPigeon’s website which uses a curve at the bottom of the hero section:
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-pathproperty
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
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.
Create Beautiful Scrolling Animations With the CSS Clip-Path Property
How to Build a Grayscale to Color Effect on Scroll (CSS & JavaScript)
Build a JavaScript Page Loading Animation With GSAP
How to Build a JavaScript Page Loading Animation
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.
In the demo below, we replicate the second example with the clip-path property with even more accurate results across all screens.
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:
Conclusion
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!
