How to Make a Diamond with CSS

Learn two reliable ways to draw a crisp CSS diamond, plus how to center text or icons inside it. Copy, paste, and customize for your UI or logo accents.

Live Preview: Diamond

Method 1: Rotate a Square (Transform)

.diamond {
  width: 140px;
  height: 140px;
  background: #cd5454;
  transform: rotate(45deg); /* square turned into a diamond */
  display: block;
  margin: 20px auto; /* centers horizontally */
}

.diamond {
  width: 140px;
  height: 140px;
  background: #cd5454;
  transform: rotate(45deg); /* square turned into a diamond */
  display: block;
  margin: 20px auto; /* centers horizontally */
}

Method 2: Clip-Path Polygon

.diamond {
  width: 150px;
  height: 150px;
  background: #cd5454;
  /* diamond shape via polygon */
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  display: block;
  margin: 20px auto; /* centers horizontally */
}

.diamond {
  width: 150px;
  height: 150px;
  background: #cd5454;
  /* diamond shape via polygon */
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  display: block;
  margin: 20px auto; /* centers horizontally */
}

How This Works

The transform method rotates a standard square by 45 degrees, which visually creates a diamond while keeping box-model behavior intact. It’s simple, fast, and widely supported.

The clip-path method cuts the element into a diamond using a polygon, so the element’s orientation stays normal (text won’t rotate). It’s great when you need non-rotated content inside the shape.

How to Center Content Inside a Diamond

The easiest approach is to use Flexbox or Grid on the diamond element to center its children. If you use the rotated-square method, optionally counter-rotate the inner content to keep it upright.

Method 1: Use CSS Flexbox

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

/* Optional: keep content upright inside a rotated diamond */
.diamond > * {
  transform: rotate(-45deg);
}

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

/* Optional: keep content upright inside a rotated diamond */
.diamond > * {
  transform: rotate(-45deg);
}

Method 2: Use CSS Grid

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

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

When to Use Each Shape Method

Use transform when you want the simplest markup and maximum browser support; note that inner content rotates unless you counter-rotate it. Use clip-path when you want a diamond shape with normally oriented content and easy responsiveness; be mindful of older browser support.

Quick Customizations

Change the color by editing background: #cd5454; and adjust size by changing width/height equally.

Outlined diamonds:

• Rotated-square method: border works as expected. Example:
  

  .diamond {
    width: 140px;
    height: 140px;
    background: transparent;
    border: 4px solid currentColor; /* outline color via 'color' */
    color: #cd5454;
    transform: rotate(45deg);
  }

• Clip-path method: border on the element will NOT follow the diamond edges (it’s drawn on the original rectangle and then clipped). Use one of these instead:
  • Two-layer approach (recommended):
    

    /* HTML */
    <div class="diamond-stroke">
      <div class="diamond-fill"></div>
    </div>
    
    /* CSS */
    .diamond-stroke,
    .diamond-fill {
      width: 150px;
      height: 150px;
      -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }
    
    .diamond-stroke {
      --stroke: 6px;            /* outline thickness */
      color: #cd5454;           /* outline color */
      background: currentColor; /* paints the outer "stroke" */
      display: grid;
      place-items: center;
    }
    
    .diamond-fill {
      background: #fff; /* fill color */
      width: calc(100% - var(--stroke) * 2);
      height: calc(100% - var(--stroke) * 2);
    }

  • CSS filter stroke (approximate outline via offset shadows):
    

    .diamond {
      width: 150px;
      height: 150px;
      background: #fff;
      -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      filter:
        drop-shadow(1px 0 0 #cd5454)
        drop-shadow(-1px 0 0 #cd5454)
        drop-shadow(0 1px 0 #cd5454)
        drop-shadow(0 -1px 0 #cd5454)
        drop-shadow(1px 1px 0 #cd5454)
        drop-shadow(1px -1px 0 #cd5454)
        drop-shadow(-1px 1px 0 #cd5454)
        drop-shadow(-1px -1px 0 #cd5454);
      /* Add more offset rings for thicker outlines */
    }

  • SVG polygon with true stroke:
    

    <svg width="150" height="150" viewBox="0 0 100 100" role="img" aria-label="Diamond outline">
      <polygon points="50,0 100,50 50,100 0,50" fill="#fff" stroke="#cd5454" stroke-width="4" />
    </svg>

Accessibility & SEO

• If the diamond conveys meaning, give it a role and label:
  

  <div class="diamond" role="img" aria-label="Warning"></div>

  Or reference visible text:

  <span id="diamond-title">Warning</span>
  <div class="diamond" role="img" aria-labelledby="diamond-title"></div>

• If it’s purely decorative, hide it from assistive tech:
  

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

• Ensure sufficient color contrast for any text inside the diamond.