How to Make a Rhombus with CSS

A rhombus (diamond) is a stylish, geometric shape you can create with pure CSS in a few lines. Below are two reliable methods and tips for centering content inside the shape.

Live Preview: Rhombus

Method 1: Rotate a Square (Transform)

.rhombus {
  width: 140px;
  height: 140px;
  background: #cd5454;
  transform: rotate(45deg);
  display: block;
  margin: 0 auto;
}

Method 2: Clip-Path Polygon

.rhombus {
  width: 140px;
  height: 140px;
  background: #cd5454;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  display: block;
  margin: 0 auto;
}

How This Works

The transform approach rotates a perfect square by 45 degrees, producing a rhombus with equal sides. It’s very simple and widely supported, but any text inside will also rotate unless you counter-rotate it.

The clip-path approach cuts a diamond out of a regular, unrotated box using polygon coordinates. Because the element itself isn’t rotated, inner content remains upright by default and is easy to align.

How to Center Content Inside a Rhombus

The easiest way is to use Flexbox or Grid. If you used the rotated-square method, counter-rotate the inner content so it reads normally.

Method 1: Use CSS Flexbox

.rhombus {
  width: 140px;
  height: 140px;
  background: #cd5454;
  transform: rotate(45deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.rhombus .content {
  transform: rotate(-45deg);
  color: #fff;
}

Method 2: Use CSS Grid

.rhombus {
  width: 140px;
  height: 140px;
  background: #cd5454;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  display: grid;
  place-items: center;
}

.rhombus .content {
  color: #fff;
}

When to Use Each Shape Method

Use the transform method when you want the simplest possible rhombus and don’t mind counter-rotating inner content. Borders and box-shadows work as expected here. Use clip-path when you want upright content, easier responsive control, or more complex diamond variants, just note the border/outline and box-shadow caveats below.

Quick Customizations

  • Color: Change background: #cd5454; to your brand color.
  • Responsive sizing: Use percentages or clamp() for width and height.
  • Borders on rotated-square method: You can use border: 2px solid #000; and it will follow the diamond edges after rotation.
  • Borders/outlines on clip-path (important): border and outline are drawn around the element’s rectangular box and then clipped, so you won’t get a visible stroke along the rhombus sides. To simulate a border, wrap the clipped element and draw a pseudo-element with the same clip-path:
    /* HTML */

      



    /* CSS */
    .diamond-wrap {
      --b: 3px;            /* border thickness */
      --shape: 50% 0, 100% 50%, 50% 100%, 0 50%;
      position: relative;
      width: 140px;
      height: 140px;
      margin: 0 auto;
    }

    /* Border layer */
    .diamond-wrap::before {
      content: "";
      position: absolute;
      inset: 0;
      background: #000;   /* border color */
      clip-path: polygon(var(--shape));
    }

    /* Fill layer */
    .diamond {
      position: absolute;
      inset: var(--b);
      background: #cd5454;
      clip-path: polygon(var(--shape));
    }

  • Shadows with clip-path: box-shadow is clipped by clip-path, so it won’t show as an outer shadow. Use filter: drop-shadow(…) instead:
    .rhombus {
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
      background: #cd5454;
      filter: drop-shadow(0 8px 14px rgba(0,0,0,0.25));
    }

  • Shadows with rotated-square: box-shadow works normally:
    .rhombus {
      transform: rotate(45deg);
      box-shadow: 0 8px 14px rgba(0,0,0,0.25);
    }

Accessibility & SEO

If the rhombus is purely decorative, add aria-hidden=”true” (no semicolon). Ensure the element isn’t focusable and doesn’t contain interactive descendants. Example:

<div class="rhombus" aria-hidden="true"></div>

If the shape conveys meaning, provide a descriptive label or adjacent text so screen readers understand its purpose.