Creating Non-Rectangular Headers
Erik Kennedy on Nov 27, 2020
Over at Medium, Jon Moore recently identified “non-rectangular headers” as a tiny trend
([Link]
. A la: it’s not crazy popular yet, but just you wait, kiddo.
We’re talking about headers (or, more generally, any container element) that have a non-
rectangular shape.
Such as trapezoids:
By Patrick Kantor ([Link]
Or more complex geometric shapes:
Robin Movies by Asar Morris ([Link]
By Marc Clancy
Or rounded/elliptical:
Music app landing page by Ibnu Mas’ud ([Link]
Or even butt-cheek shaped:
Plutio by Leo Bassam. ([Link] Sorry Leo, I can’t unsee it. And now, dear
reader, you can’t either.
My money is on these gaining popularity too. So let’s beat the crowd, and talk about a few ways
of coding these up. Because let’s face it: they do look pretty awesome.
(#aa-image) Image
Perhaps the simplest way to create any of the non-rectangular headers pictured above is to slap
an image on top of your header.
Embedded Pen Here
But there are a few issues here:
Responsive behavior? These masks tend to be full-width, and it becomes tedious to define
multiple widths of the shape (e.g. srcset) or risk pixelation of raster assets.
It’s a totally separate file that needs to be fetched from the server – seems wasteful for simple
shapes.
It’s slow to iterate in-browser if you have to re-export an image file(s) from your design
program.
We can solve all of these problems at once. You might already know where this one is going.
(#aa-svg) SVG
Compared to exporting a JPG from Sketch, using an inline SVG is more performant, easy to
make responsive, and easy to iterate the design of. In fact, for most cases, this is the way I’d
recommend using. Versatile, cross-browser, vector, and fabulous.
Embedded Pen Here
With an angled background one like, one choice you have to make is: what should remain
constant as the screen-width changes, the angle or the height differential between the two
sides?
If you want the angle to remain constant, set the height of the SVG in vw:
If you want the height differential to remain constant, set the height of the SVG in pixels:
And you need not pick just one – we can style this responsively, since SVG elements are subject
to media queries. Check out this geometric style header at widths below and above 700px.
Embedded Pen Here
Shoot, son. What’s not to love? Oh, and we can even do the butt-cheeks style.
Embedded Pen Here
(Perhaps that’s more properly done with beziers, but you get the idea!)
One more thing worth nothing, and that is if you want to do an SVG background entirely in
CSS, you could save the SVG and reference its URL in a pseudo element.
CSS
header::after {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: url([Link]);
}
And if you use `[Link]̀ as a repeating element in different scenarios, you can also color it
different as you need:
CSS
header::after polygon {
fill: white;
}
But here’s an issue: what if the section below the header has a complicated background? In all
these examples so far, we’ve just assumed a plain white background. What if there’s a fancy
gradient, or another background image or something? Then what?
(#aa-clip-path) clip-path
This property comes to the rescue if you have a moderately complex background below the
header, and therefore want the masking to be done from within the non-rectangular header, as
opposed to by an element after it.
Embedded Pen Here
And like the similar SVG syntax, if you want to change the responsive behavior of the above
from angle-is-held-constant to height-differential-is-held-constant, you can change the
calculated height to a simple percentage.
Clip-path’s biggest downside? Browser support is not that great
([Link] . However, depending on how important your non-
rectangular header or div is, it might qualify as a progressive enhancement. In which case,
clip-path away!
(#aa-border-radius) border-radius
Now, up to now, we’ve only mentioned methods that work for generating all the shapes I called
out above. However, if we know what particular shape we want our header to have, we might
have access to an easier way.
For instance, a convex elliptical header is a perfect fit for border-radius.
Embedded Pen Here
And a concave elliptical header could simply have the border-radius on the element after the
header.
CSS
section {
border-bottom-left-radius: 50% 20%;
border-bottom-right-radius: 50% 20%;
}
Another benefit to this method is that the background of the section below the header could
still have background images.
(#aa-transform-skew) transform: skew
If we know that we want to create do a trapezoidal header, we can use a CSS transform to skew
the whole thing.
Embedded Pen Here
This has the side effect of skewing any child elements of the skewed element, so you’ll want to
add a child element in the header that gets skewed, and everything else will go in sibling
elements.
Skewed.
And unskewed.
Stripe’s homepage design uses this method, and even more brilliantly, they include a few
children spans (each is a block of color) that get skewed with the parent element, creating a
more complex and colorful effect.
(#aa-which-is-best) Which is best?
As far as I’m concerned, SVG is generally the way to go. However, if you have a more complex
background below the header, then the best choice depends on the shape. In that case, I’d
investigate if skew or border-radius could meet the art direction needed, or if browser support
was enough of a non-issue to go with clip-path.
Allows complex BG below Browser support Shapes creatable
Image No Yes All
SVG No Yes All
Clip-path Yes No All
Border-radius Yes Yes Elliptical only
Transform: skew Yes Yes Trapezoidal only
Erik Kennedy is an independent
UX/UI designer and the creator of
Learn UI Design
([Link] , a practical
online video course about visual
design for screens. Includes color,
typography, process, and more. Over
16 hours of video across 30+ lessons.
([Link]
