CSS Diamond Generator

A diamond as a shape in its own right, not a square turned 45 degrees with the text lying on its side. Copy the clip-path and the contents stay upright.

About the CSS diamond

Search for a CSS diamond and the first answer is almost always transform: rotate(45deg) on a square. That does produce a diamond outline, and it causes three problems at once: the text inside is now at 45 degrees, the element's layout box is still the unrotated square so it overlaps its neighbours, and the corners stick out past the box you thought you had.

Clipping four points out of the element gives you the same silhouette with none of that. The box stays where the layout put it, the contents stay upright, and the diamond is exactly as big as its element.

The code

.shape {
  aspect-ratio: 1 / 1;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  width: 240px;
  background: #0d6efd;
}

The midpoint of each edge, joined up. In a square box that is a square standing on its corner - what most people mean by a diamond. Make the box taller and it becomes the elongated diamond of a playing card; make it wider and you get a flat lozenge. The polygon does not change, only the box, which is why the aspect ratio is part of the rule.

Diamond, rhombus or kite

Diamond - all four points at the edge midpoints, in a square box. Symmetrical in both directions.
Rhombus - the same idea with a Waist setting, so you can pull the left and right points in towards the centre and get a narrower, leaning shape without changing the box.
Kite - the side points moved up or down, so the top half is short and the bottom half long. This is the shape people usually mean by a gemstone.

Where it gets used

Timeline and process markers, where a diamond between two line segments reads as a milestone. Decision nodes in a flow diagram. Card-suit graphics. Rotated grid layouts and harlequin patterns. And it is one of the few shapes that works well very small - a 10-pixel diamond is still legible as a bullet or a separator, where a star or a heart would turn to mush.

Frequently asked questions

Why not just rotate a square 45 degrees?

Because a transform does not change the layout. The element still occupies its original square, so the rotated corners overflow it and everything around it is positioned as though nothing happened. And anything inside - text, an icon, a number - rotates with it, so you need a counter-rotation to read it. Clipping avoids both.

Can I put a number or an icon inside a diamond?

Yes, and it will be the right way up. Just keep it small and centred: the usable area is the middle of the box, since all four corners are cut away. As a rule of thumb, content should stay inside the middle half of the width.

How do I make a diamond with a border?

Turn up the Border control. A clipped element cannot have a real border, so the rule stacks two layers on one element instead: the border color on the element, the same diamond inset by the border width on a ::after above it. If the diamond is empty, a square rotated 45 degrees does keep a real border - which is the one case where the old trick still wins.

What is the difference between a diamond and a rhombus?

In geometry a rhombus is any quadrilateral with four equal sides, and a diamond is the everyday word for one balanced on a point. In this tool the difference is practical: Diamond is fixed to the edge midpoints, Rhombus lets you drag the waist in.

Menu