Rotating a square with a number in the centre CSS-CodePudding

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 >1</div>

CodePudding user response：

Use a span and rotate it back the other way.

.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;
  transform: rotate(45deg)
}

.diamond span {
  transform: rotate(-45deg);
  display: inline-block;
}

<div ><span>1</span></div>

CodePudding user response：

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 >1</div>