How to hero section clip-path design: css angles and custom shapes
- Step 1Pick the hero shape — Start from a proven recipe: angled-bottom
polygon(0 0, 100% 0, 100% 85%, 0 100%), asymmetric diagonalpolygon(0 0, 100% 0, 100% 92%, 0 100%)with a steeper drop on one side, chevronpolygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%), or a side notch. For a custom outline, draw it as a straight-edged SVG path and generate the value with this tool. - Step 2Apply the clip and reserve space — Add the
clip-pathto the hero element, then addpadding-bottomat least as large as the deepest part of the cut. If the angle removes ~15% of height at one corner, pad the content so it sits above the cut line on the shortest viewport. - Step 3Match the following section's edge — To make the diagonal continue cleanly into the next block, give that block a complementary top clip — for an angled-bottom hero ending at
0 100% / 100% 85%, start the next section atpolygon(0 5%, 100% 0, 100% 100%, 0 100%)so the lines meet. - Step 4Set a background that survives the clip — The clip removes pixels, so a background-color, gradient, or background-image on the hero is cut to the shape automatically. If you use a separate background layer, clip the layer that actually paints the colour, not an empty wrapper.
- Step 5Test mobile and tall content — On narrow viewports the hero is taller relative to its width, so a percentage-based angle cuts deeper into content. Verify the headline, subhead, and CTA all clear the cut at 360px width and with the longest translated copy.
- Step 6Add a fallback for unsupported engines — Wrap the clip in
@supports (clip-path: polygon(0 0)). Browsers that fail the test simply show a rectangular hero — which is a perfectly acceptable fallback rather than a broken layout.
Hero shape recipes
Copy-paste polygon() values. All edges are straight; 'curved' looks need path() or an SVG divider. Add bottom padding equal to or greater than the deepest cut.
| Shape | clip-path: polygon() | Deepest cut | Pad the content by |
|---|---|---|---|
| Angled bottom (gentle) | polygon(0 0, 100% 0, 100% 85%, 0 100%) | 15% of height (one corner) | >= 15% height |
| Asymmetric diagonal | polygon(0 0, 100% 0, 100% 92%, 0 100%) | 8% on the right edge | >= 8% height |
| Chevron / point down | polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%) | 12% at the centre point | >= 12% height |
| Slant up (left high) | polygon(0 0, 100% 0, 100% 100%, 0 85%) | 15% on the left edge | >= 15% height |
| Inset band (notch) | polygon(0 0, 100% 0, 100% 100%, 60% 100%, 60% 90%, 40% 90%, 40% 100%, 0 100%) | 10% in the notch | >= 10% near the notch |
When polygon() is the wrong tool for a hero
Reach for a different technique when the design needs curves, soft edges, or a separate decorative layer.
| Design intent | Use instead | Why not polygon() |
|---|---|---|
| Smooth curved bottom (single arc) | clip-path: path() or an SVG divider | polygon() has no curves; many segments only fake it |
| Wavy divider between sections | Wave/Section Divider | Generates a real curved SVG to layer |
| Organic blob backdrop | Blob Generator | Smooth Bezier blob, not a faceted polygon |
| Soft faded image edge | mask-image: gradient | clip-path edges are always hard |
| Straight angled / chevron cut | polygon() (this generator) | Exactly what polygon() is for |
Cookbook
Hero patterns with the CSS you can paste, plus the overlap and matching-edge math that keeps content readable.
Angled-bottom hero with safe content padding
The classic gentle diagonal. The cut removes up to 15% of height at the bottom-right, so reserve at least that much padding for content.
.hero {
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
padding-bottom: clamp(48px, 15vh, 160px); /* clears the cut */
background: linear-gradient(135deg, #4f46e5, #7c3aed);
}Seamless transition into the next section
Mirror the hero's bottom edge on the next section's top so the diagonal line is continuous with no gap.
.hero { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }
.next { clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
margin-top: -1px; /* hide sub-pixel seam */ }Chevron hero pointing to the content below
A centre point draws the eye downward to the first content block. Pad enough that the CTA clears the 12% centre dip.
.hero {
clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
padding-bottom: 14vh;
}Custom hero outline generated from an SVG
Draw a straight-edged hero silhouette as one SVG path, generate the polygon, and rename the class. Keep it straight-edged so the conversion is exact.
Input SVG (0 0 100 100):
<path d="M0 0 L100 0 L100 80 L60 95 L0 88 Z"/>
Generated CSS:
.input-clip {
clip-path: polygon(0.0% 0.0%, 100.0% 0.0%, 100.0% 80.0%, 60.0% 95.0%, 0.0% 88.0%);
}
/* rename .input-clip to .hero */Fallback so old browsers still look fine
Guard the clip with @supports. Engines that do not support it show a clean rectangle instead of a broken hero.
.hero { /* rectangular by default */ }
@supports (clip-path: polygon(0 0)) {
.hero { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }
}Edge cases and what actually happens
Diagonal cuts off the headline on mobile
Content clippedPercentage angles cut deeper relative to content on narrow, tall viewports. Without enough padding-bottom, the headline or CTA falls into the removed area. Reserve padding at least equal to the deepest cut and test at 360px width with your longest copy.
Wanting a smoothly curved hero bottom
Use path() insteadclip-path: polygon() cannot draw curves. A 'curved' hero made of many polygon points is heavy and still faceted. Use clip-path: path('M0,0 ... C ...') for a true arc, or layer a real curved SVG from the Wave/Section Divider.
Box-shadow disappears on the clipped element
Expectedclip-path clips the element including its shadow — a box-shadow on a clipped hero is cut away with everything else. To cast a shadow along the angled edge, put the shadow on a wrapper, or use a drop-shadow() filter, which follows the clipped silhouette.
The two section edges do not line up
Seam visibleIf the next section's top angle does not mirror the hero's bottom angle, a triangular gap or overlap appears at the join. Use complementary coordinates and a margin-top: -1px to absorb sub-pixel rounding between the two clips.
Sticky/fixed children inside a clipped hero vanish
Clipping contextclip-path establishes a clipping context, so position: fixed or sticky children are clipped to the hero rather than the viewport. Move fixed elements (a sticky nav, a chat widget) outside the clipped element.
Generated curve hero looks faceted
FlattenedIf you draw the hero with Bezier curves and run it through this generator, only the endpoints survive, so the curve becomes straight chords. Either draw the outline with straight segments to begin with, or accept the faceted look. For smooth curves, do not use polygon().
Background image not clipped
Clip the painted layerThe clip applies to the element it is set on. If the colour/image is painted on a child or a separate background layer, clip that layer, not an empty parent — otherwise the visible rectangle ignores the clip.
No clip-path support at all
Rectangular fallbackAn engine without support shows the hero as a normal rectangle. Wrap the declaration in @supports so unsupported browsers degrade to a clean rectangle rather than a layout glitch.
Frequently asked questions
How do I stop the angle from cutting off my hero text?
Add padding-bottom at least as large as the deepest part of the cut, ideally with a clamp() so it scales with viewport height. Then test on a 360px-wide phone where the hero is tallest relative to its width and the angle bites deepest.
Can I make a smoothly curved hero bottom with this generator?
No. The generator outputs polygon(), which has only straight edges, and it keeps only path endpoints so curves flatten to chords. For a true curve use clip-path: path(), or layer a curved SVG from the Wave/Section Divider tool.
How do I make the next section's angle match the hero's?
Give the next section a complementary top clip. For a hero ending ..., 100% 85%, 0 100%, start the next section polygon(0 5%, 100% 0, 100% 100%, 0 100%) and pull it up with margin-top: -1px to hide sub-pixel seams.
Do percentage clips really work at every breakpoint?
Yes — that is the main reason to use percentages. The same polygon() clips a 360px phone hero and a 1920px desktop hero to the same proportional shape, so you rarely need breakpoint-specific values. You may still tune padding per breakpoint.
Why did my box-shadow disappear on the angled hero?
clip-path clips the shadow along with the element. Put the shadow on an unclipped wrapper, or use a filter: drop-shadow() which follows the clipped silhouette instead of the rectangular box.
My sticky nav broke inside the hero — why?
A clip-path creates a clipping context, so position: fixed/sticky descendants are clipped to the hero. Move the nav or any fixed widget outside the clipped element.
Should I clip the hero or a background layer?
Clip whichever element actually paints the colour or image. If you clip an empty wrapper while a child paints the background, the visible rectangle ignores the clip. Set clip-path on the painted layer.
How do I generate a custom hero shape?
Draw the hero outline as a single straight-edged SVG path, then run it through this generator to get the polygon value, and rename the class to .hero. Keep it straight-edged so the conversion is faithful.
What about a wavy divider between two sections?
polygon() cannot do smooth waves. Use the Wave/Section Divider to generate a real curved SVG you position between the sections, or the Blob Generator for an organic backdrop.
Is clip-path good for performance on a hero?
Yes for simple polygons — they are cheap to composite and do not need an overlay image or extra DOM. Avoid very high point counts and animated complex clips if you target low-end mobile; a handful of vertices is plenty for a hero.
Do I need a fallback in 2026?
polygon() support is effectively universal in evergreen browsers, but a one-line @supports guard costs nothing and ensures any unusual engine shows a clean rectangle instead of a glitch. It is worth keeping for resilience.
Can I animate the hero clip on scroll?
Yes — animating the clip-path value (same point count, different percentages) can morph the angle on scroll. Keep the vertex count stable between keyframes so the browser can interpolate, and keep it modest for smooth performance.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.