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

也许你可以使用偏斜代替： （对于90度轮换，有writing-mode用于此目的，不幸的是，它不会在这里做到）

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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