html - div旋转时如何将文本左对齐？

Question

我目前正在努力解决布局问题。我想创建一个旋转的 div，其中包含文本，但文本不应该旋转；我希望文本与左侧对齐，但保留旋转 div 的边缘。

这是我迄今为止尝试过的简化版本:

.container {
  background-color: green;
  width: 200px;
  height: 300px;
  transform: rotate(30deg);
  position: relative;
 }

.text {
 background-color: red;
 color: white;
 transform: rotate(-30deg);
}

<div class="container">
 <div class="text">
  <p>
   This is some text.
  </p>
  <p>
   And here's the second paragraph.
  </p>
 </div>
</div>

我想要的是第二段与旋转 div 的左侧对齐。

想要的效果:

CSS 可以吗？还是我应该尝试使用 JS？

Answer 1

去掉div，达到你想要的结果。

.container {
  background-color: green;
  width: 200px;
  height: 300px;
  transform: rotate(30deg);
  position: relative;
 }

p {
/* background-color: red;*/
 color: white;
 transform: rotate(-30deg);
}

<div class="container">

  <p>
   first paragraph
  </p>
  <p>
   second paragraph.
  </p>
  <p>
  third paragraph
  </p>
  <p>
  fourth paragraph
  </p>
</div>