How to use the Angled Section CSS
- The preview starts with an angled bottom edge. Choose Both for a slanted band, or Top.
- Use Flip horizontally to change the slant direction.
- Set the cut depth in px (fixed angle) or vw (scales with the screen).
- Copy the CSS.
Angled sections without skew
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%) slants the bottom edge of a section while the text inside stays straight — unlike transform: skewY(), which tilts the content too. Pull the next section up under the angle with a negative margin so its background fills the gap.
Other edge shapes — curves, arrows, waves and zigzags — are in the Section Divider Generator.
Also searched as: slanted section css, diagonal section css, css angled background, skewed section css, css diagonal divider, angled hero section.
Tools that pair well with the Angled Section CSS
- Curved Section Divider — Round off the edge of a hero or section with a curve — convex, scooped, a curved angle, a gentle wave or scallops — using only CSS.
- Zigzag Border CSS — Cut a zigzag, sawtooth, scalloped or stepped edge into sections, cards, coupons and receipt designs.
- SVG Wave Generator — Design wavy section dividers for landing pages: add or remove waves (up to 6, each with its own color, opacity and shape), set the number of crests, height and smoothness, choose colors and whether the wave sits at the top or bottom.
- CSS Clip-path Generator — Cut images and elements into any shape: pick one of 15 starting shapes — triangle, hexagon, star, arrow, chevron, speech bubble, circle, ellipse, rounded inset… — then drag the points over a sample or your own image.
Frequently asked questions
How do I angle both the top and bottom of a section?
Choose the Both edge: the polygon cuts the top and bottom in parallel, giving a slanted band — clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%).
Should I use skewY or clip-path?
clip-path. skewY tilts the text and images inside the section too, so you need a second, reversed skew on the content; clip-path only cuts the edge.
How do I keep the angle the same on mobile?
Use a vw cut depth: the cut scales with the screen width, so the angle stays the same at every width.
Can I install Angled Section CSS as a web app and use it offline?
Yes. Angled Section CSS is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.