How to align text to the left side when div is rotated?

user_14289641 0
Viewed 74

I'm currently struggling with a layout problem. I'd like to create a rotated div with a text inside it, but the text should not be rotated; I'd like the text to be aligned to the left side but keep the edge of the rotated div.

Here's the simplified version of what I've tried so far:

.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>

What I'd like to have is the second paragraph to be aligned to the left side of the rotated div.

The desired effect:

rotated div with text aligned left

Is it possible with CSS or should I somehow try with JS?

rotation alignment css html
1 Answers

Removed the div, and achieve the result you want.

.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>

user_139905930
Related