CSS Shape Generator
Generate CSS shapes — clip-path presets, border-trick triangles, organic blobs and aspect-ratio boxes — with the trade-offs of each technique.
The classic zero-size-box border trick — works everywhere, no clip-path support needed.
The same triangle is three different triangles
polygon(50% 0%, 100% 100%, 0% 100%) reads as "a triangle". It is not. Each
percentage resolves against its own axis of the box, so the horizontal and vertical scales are
independent and the shape is stretched by the aspect ratio:
| Box | Apex angle | Base angles |
|---|---|---|
| 200 × 200 | 53.1° | 63.4, 63.4 |
| 400 × 200 | 90.0° | 45.0, 45.0 |
| 200 × 400 | 28.1° | 76.0, 76.0 |
In a square it is a fairly narrow triangle; in a box twice as wide it is a right-angled one. Nothing in the CSS changed. It stays a triangle and stays isosceles throughout — it is the angles that move, not the topology.
| Aspect ratio | Apex | Change from square |
|---|---|---|
| 1:1 | 53.1° | — |
| 1.5:1 | 73.7° | +20.6 |
| 2:1 | 90.0° | +36.9 |
| 3:1 | 112.6° | +59.5 |
| 4:1 | 126.9° | +73.7 |
Doubling the width adds nearly 37 degrees, landing exactly on a right angle. That is why a clipped shape looks right at the size it was drawn at and wrong on a phone, and why adjusting the percentages is almost never the fix.
One thing fell out of checking this that is worth keeping. The change at 4:1 is exactly twice the change at 2:1 — 73.7 against 36.9, equal to the last digit. That is not rounding: the apex is twice the arctangent of half the ratio, and the arctangents of 2 and of a half are complementary angles. It does not generalise, though. 3:1 adds 59.5, well short of twice 36.9. I first wrote that pair down as a counterexample to linearity and it turned out to be the one pair that looks linear.
What survives, and why
Scaling the two axes independently is an affine transform, and affine transforms keep some properties and not others. Straight lines stay straight, parallel lines stay parallel, midpoints stay midpoints, and ratios along a single line are unchanged. Angles and lengths are not preserved, and neither are circles.
| Box | Corners of an inset rectangle |
|---|---|
| 200 × 200 | 90.0°, 90.0°, 90.0°, 90.0° |
| 400 × 200 | 90.0°, 90.0°, 90.0°, 90.0° |
| 200 × 400 | 90.0°, 90.0°, 90.0°, 90.0° |
Four right angles at every aspect ratio, because the edges lie along the axes being scaled and stretching an axis cannot tilt a line that runs parallel to it. Any shape built only from horizontal and vertical edges is safe. Everything diagonal is not: a triangle, a chevron, a parallelogram cut at fifteen degrees all shear as soon as the box stops being the shape they were drawn in.
Midpoints survive and lengths do not, which is a useful pair to hold together: a point at 50% stays at the middle of the line it is on, while the line itself gets longer or shorter. So percentages are exactly right for placing things and exactly wrong for sizing them.
Which makes the units the fix. A polygon can mix them, so a chevron with its notch given in
pixels keeps that notch the same size and the same angle whatever the element does, while the
percentage parts carry on tracking the edges. The other option is to stop fighting it: set
aspect-ratio on the element and the percentages mean what they meant when you
drew them.
How to use
- Choose a shape family and a preset to start from.
- Adjust the points, radii or angles.
- Resize the preview to check the shape holds its proportions.
- Confirm the clipped area still receives clicks where you expect.
- Copy the generated CSS.
Frequently asked questions
What is clip-path?
A property that hides everything outside a defined region, so a rectangular element displays as a polygon, a circle or an arbitrary path. The element still occupies its full rectangle as far as layout is concerned — only the painting is clipped, which is why surrounding content does not reflow around the visible shape.
Why are triangles traditionally made with borders?
A trick that predates clip-path: an element with zero width and height but thick borders shows those borders meeting at diagonals, so making three of them transparent leaves a single triangle. It still works and enjoys universal support, but clip-path is far clearer to read and much easier to modify later.
Should I use percentages or pixels in clip-path?
Percentages, in almost every case, because they scale with the element. Pixel coordinates produce a shape that distorts or clips wrongly as the element resizes, and the failure shows up immediately on a responsive layout where the element's width is not fixed.
Does clipping affect clicks and hover?
Yes — the clipped-away region stops receiving pointer events, so the hit area matches the visible shape rather than the original rectangle. This is usually exactly what you want, and occasionally surprising when an element stops responding in a corner that no longer visually exists.
What does the aspect-ratio property do?
Holds an element at a fixed proportion as it resizes, so a card stays 16 by 9 whatever its width. It replaced the old padding-top percentage hack, which worked but demanded a wrapper element and an absolutely positioned child to hold the content.
Can text flow around a CSS shape?
Only with shape-outside, which is a separate property and applies to floated elements. Clip-path changes what gets painted; shape-outside changes how surrounding content wraps around it. Using one and expecting the behaviour of the other is a common and confusing mistake.
Are clipped shapes accessible?
The clipping itself is purely visual, so content inside remains available to screen readers — which cuts both ways. Text clipped out of view is still announced, so anything genuinely hidden should be removed or marked hidden rather than merely clipped away.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.