CSS Parallelogram Generator

A slanted box for buttons, tabs and section dividers. Set how far it leans, flip it the other way, and copy a rule that leaves the text inside it upright.

About the CSS parallelogram

A slanted box is the shape of speed. It turns up on call-to-action buttons, active tabs, progress steps, sports and gaming layouts, and as the diagonal edge between two sections of a page. It is also the shape most often built the wrong way round.

The traditional method is transform: skewX(-20deg), which leans the box - and everything inside it. The text goes italic-ish and slightly wrong, so you undo it with skewX(20deg) on an inner element. Two transforms fighting each other, an extra wrapper, and blurry text on some renderers. Clipping the corners off instead leaves the contents completely alone.

The code

.shape {
  clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
  width: 240px;
  height: 240px;
  background: #0d6efd;
}

Four corners. The top edge starts 20% in from the left and runs to the right edge; the bottom edge starts at the left edge and stops 20% short of the right. That 20% is the slant, and because it is a percentage of the width, a wide button leans further in pixels than a narrow one. If you want a constant lean regardless of width, swap the percentages for a fixed value: polygon(24px 0%, 100% 0%, calc(100% - 24px) 100%, 0% 100%).

Slant, and which way it leans

Slant - 5% is a barely-there nudge, good for a section divider. 20% is the standard button lean. Past 35% the shape starts eating its own content.
Back - the mirrored preset, leaning the other way. A matched pair makes the classic angled tab group, where the right edge of one tab and the left edge of the next are parallel.
Trapezoid - if you want the top and bottom edges to be different widths instead of offset, that is a trapezoid, not a parallelogram, and it has its own preset.

Keeping the text where you can read it

The contents are not skewed, but they are clipped. The bottom-left and top-right corners of the box are cut away, so a line of text that runs the full width will lose its ends. Give the element horizontal padding at least as wide as the slant on both sides and the problem disappears. For a button, that usually means the padding you already wanted.

Frequently asked questions

Should I use clip-path or transform: skew?

Clip-path, unless you need the contents skewed too. Skewing is one property, but it slants the text, requires a counter-skew on a wrapper, and can soften text rendering. Clipping affects only the silhouette. Skew does keep one advantage: it can be transitioned smoothly, so an animated lean is easier that way.

How do I make an angled section divider?

Do not use a parallelogram - use the slanted top or slanted bottom preset, which cuts only one edge of a full-width block. Stack two sections with opposite slants and the diagonal between them lines up exactly. A parallelogram cuts both edges, which is rarely what a full-width section wants.

Can a parallelogram have a border?

Yes - use the Border control and the rule comes out as two layers on one element, since a real border would be clipped away with the corners. Skewing instead of clipping does keep a real border, which is the one remaining argument for the old method: a real border can be dashed or dotted, and a two-layer one cannot.

Why does my button's hover area include the cut corners?

Because clip-path also clips hit testing in current browsers - a click in the cut corner should pass through. If yours does not, the clickable element is probably a wrapper that is not clipped; move the clip-path onto the <button> or <a> itself.

Menu