CSS实现正方形旋转但内部数字不旋转的问题求助

要实现正方形旋转成菱形后内部数字不旋转，核心思路是父容器旋转，内部数字元素反向旋转，抵消父容器的旋转效果。下面提供两种适配你需求的方案：

方案一：用正方形旋转实现菱形（更直观易维护） #

调整HTML结构，将数字放在独立子元素中，通过父元素旋转形成菱形，子元素反向旋转保持数字正向：

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

.diamond {
  width: 100px;
  height: 100px;
  background-color: #EB008B;
  transform: rotate(45deg);
  position: relative;
  margin: 50px; /* 调整margin避免容器溢出页面 */
}

.number {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 先居中再反向旋转，抵消父元素的45度旋转 */
  transform: translate(-50%, -50%) rotate(-45deg);
  font: 40pt Arial, sans-serif;
  color: white;
}

方案二：沿用你原有的border拼接菱形方式 #

保留你原有的border拼接逻辑，给菱形容器添加旋转，同时给数字子元素反向旋转并调整位置：

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

.diamond {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: #EB008B;
  position: relative;
  top: -50px;
  transform: rotate(45deg); /* 旋转菱形 */
}

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

.number {
  position: absolute;
  top: 25px;
  left: -25px;
  transform: rotate(-45deg); /* 反向旋转数字，恢复正向 */
  font: 40pt Arial, sans-serif;
  color: white;
}

两种方案都能实现“菱形旋转、数字保持正向”的效果，方案一的结构更简洁，后续调整尺寸或样式更方便。

内容的提问来源于stack exchange，提问作者j4mes83