html - 使用 css/sass 的 x 轴倾斜文本

Question

如何使文本沿 x 轴倾斜，如图所示。我尝试了变换，但无法倾斜它。

我在跨度内有这样的文本:

<span className="o-display-month">{value.Date}</span>

Answer 1

元素必须不是内联的。然后你可以使用负值的旋转 transform:rotate(-XXdeg);

.times{list-style:none;padding:0}
.times li{
  display:inline-block;
  margin-right:1em;
  transform:rotate(-40deg);
}

<ul class="times">
  <li>1 pm</li>
  <li>2 pm</li>
  <li>3 pm</li>
  <li>4 pm</li>
  <li>5 pm</li>
  <li>6 pm</li>
  <li>7 pm</li>
  <li>8 pm</li>
</ul>