html - div 内的旋转文本重叠

Question

所以我会尽力解释这里的情况。 我想在 div 内旋转一些文本而不让它的边缘显示在 div 之外。我想要附图中的东西:

我目前得到的是这样的:

<aside>
    <h2>Greeting<p>s</p></h2>
    <div class="text">
      <p>
        text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
      </p>
    </div>
  </aside>

aside{
  width: 20%;
  display: inline-block;
  vertical-align: top;
  background-color: rgba(151, 0, 0, 0.76);
  height: 71.3em;
  float: left;
  text-align: center;

  h2{
    color: black;
    font-family: 'Kaushan Script', cursive;
    position: relative;
    top: 1em;
    font-size: 2em;
    display: inline-block;
    transform: rotate(15deg);
    &:first-letter{
      font-size: 3em;
    }
    p{
      display: inline;
      font-size: 2em;
    }
  }

  .text{
    position:relative;
    top: 3em;

    p{
      font-size: 2em;
      color: black;
      font-family: 'Kaushan Script', cursive;
      transform: rotate(15deg);
    }
  }
}

Answer 1

也许你可以改用 skew : (对于 90 度旋转，有 writing-mode 用于此目的，不幸的是，它不会在这里做)

aside {
  width: 20%;
  min-width:20em;
  display: inline-block;
  vertical-align: top;
  background-color: rgba(151, 0, 0, 0.76);
  height: 71.3em;
  float: left;
  text-align: center;
}
aside h2 {
  color: black;
  font-family: 'Kaushan Script', cursive;
  position: relative;
  top: 1em;
  font-size: 2em;
  display: inline-block;
  transform: skew(0, 15deg);
}
aside h2:first-letter {
  font-size: 3em;
}
aside h2 p {
  display: inline;
  font-size: 2em;
}
aside .text {
  position: relative;
  top: 3em;
}
aside .text p {
  font-size: 2em;
  color: black;
  font-family: 'Kaushan Script', cursive;
  transform: skew(0, 15deg);
}

<aside>
    <h2>Greeting<p>s</p></h2>
    <div class="text">
      <p>
        text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
      </p>
    </div>
  </aside>

http://codepen.io/anon/pen/GqBymr