Seven ways to break the horizontal line: a slanted bottom edge cut with clip-path, a skewed band whose text stays level, a section sloped on both edges, a diagonal gradient split, a stripe across the background, an image with an angled edge and a chevron that points to the next section.
The section's bottom edge slopes because clip-path: polygon() cuts a triangle off it. The cut is a calc() from the bottom so the slope stays the same height at any width, and extra bottom padding keeps the text clear of it.
View code
<section class="dg1"><h3>Designed in Copenhagen</h3><p>Furniture for small apartments.</p></section>
The band is skewed with transform: skewY(-4deg) and its content is skewed back by the same amount, so the edges slope but the text stays level. The skew affects both edges equally, giving a parallel slanted stripe.
View code
<section class="dg2"><div class="in"><h3>Free returns, always</h3><p>Send it back within 30 days.</p></div></section>
A section sloped on both edges in opposite directions, using one four-point polygon. The padding on both sides is larger than the slope height, a rule worth keeping so headings and buttons never get clipped.
View code
<section class="dg3"><h3>Trusted by 2,000 shops</h3><a href="#stories">Read their stories</a></section>
A hard diagonal edge between two colours made entirely with a linear-gradient: two colour stops at the same position create a sharp line instead of a blend. No clipping or extra elements, and the angle is one number.
View code
<section class="dg4"><h3>Day and night</h3><p>Two themes, one switch.</p></section>
A thin coloured stripe crosses the section at an angle behind the heading, an energetic accent for sports or event sites. The stripe is a rotated pseudo-element, wider than the section so its ends are always hidden by overflow.
View code
<section class="dg5"><h3>Race day: 12 April</h3><p>Registration closes on 1 April.</p></section>
A text and image section where the image's inner edge is angled, so the two halves interlock instead of meeting at a straight line. The clip is on the image only, and the text keeps a normal box.
View code
<section class="dg6"><div class="tx"><h3>Cold brew, done right</h3><p>Steeped for 18 hours.</p></div><div class="im" role="img" aria-label="Iced coffee in a glass"></div></section>
A section whose bottom edge points down to the next section like an arrow, nudging the reader to scroll. It is a five-point polygon: the centre point drops lower than the two corners.
View code
<section class="dg7"><h3>How it works</h3><p>Three steps, ten minutes.</p></section>
clip-path: polygon() trims a section to any shape. Using calc(100% - 40px) for the sloped corner keeps the slope the same height whatever the section's width.
Skew and unskew
transform: skewY(-4deg) slants a whole band, edges included. Skew the inner content back by the same amount so text and buttons stay level.
Leave room for the slope
Clipped corners can cut into content. Add padding larger than the slope height on every sloped edge so nothing important is hidden.
Gradients for hard edges
Two colour stops at the same position in a linear gradient make a crisp line instead of a blend, which draws a diagonal split with no extra elements.
Frequently asked questions
Do clipped sections affect clicks?
Yes. Clipped areas cannot be clicked, which is usually what you want for decoration.
How do I make the next section meet the slope?
Give the next section a negative top margin equal to the slope, or match its background colour behind the cut.
Will diagonals work on phones?
Yes, but use smaller slope heights so they do not eat the small screen.