css - 文字在菱形内垂直对齐

我已经使用以下代码成功创建了Diamond

CSS：

 .diamond {
      height: 75px;
      width: 75px;
      border-radius:15px;
      transform: rotate(45deg);
      float: left;
      margin-left: 18%;
      font-size:50px;
      color: white;
      font-family:Adequate-ExtraLight;
    }

    <div class="diamond" style="background-color:#ff4d4d">48</div>

以上代码产生的输出具有倾斜的文本，
但我想水平制作文字。我尝试了但是失败了。
任何人都可以告诉我如何实现这一目标。

最佳答案

<div class="diamond" style="background-color:#ff4d4d">
  <div class="text-inside-diamond">48</div>
</div>

.text-inside-diamond {
  transform: rotate(-45deg);
  margin-left: 10%;
}

内部类的左边距只是将div居中
您的钻石级别保持原样。

关于css - 文字在菱形内垂直对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48474353/