Rotating a square with a number in the centre CSS

Issue

Having problems with rotating a square but keeping the number inside it not rotated.

Ideally I would like it like this:

.diamond {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: #EB008B;
  position: relative;
  top: -50px;
  text-align: center;
  font: 40pt Arial, sans-serif;
  color: white;
}

.diamond:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: #EB008B;
}

<div class="diamond">1</div>

Solution

Keep it simple and use clip-path instead of transform

.diamond {
  width: 100px;
  aspect-ratio: 1;
  font: 40pt Arial, sans-serif;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #EB008B;
  margin: 50px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

<div class="diamond">1</div>

Answered By – Temani Afif

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0