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

Question

这个问题在这里已经有了答案:





CSS rotate text by n degress, but not the boundary box?

(2 个回答)


12 个月前关闭。




我目前正在努力解决布局问题。我想创建一个带有文本的旋转 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>