Html div重叠中的旋转文本

因此，我将尽我所能在这里解释情况。 我希望在div内旋转一些文本，而不让其边缘显示在div外。我希望在所附图像中显示类似的内容：

我现在得到的是这样的东西：

问候s


文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

旁白{
宽度：20%；
显示：内联块；
垂直对齐：顶部；
背景色：rgba（151,0,0,0.76）；
身高：71.3em；
浮动：左；
文本对齐：居中；
氢{
颜色：黑色；
字体系列：“考山体”，草书；
位置：相对位置；
顶部：1米；
字号：2em；
显示：内联块；
变换：旋转（15度）；
&：第一个字母{
字号：3em；
}
p{
显示：内联；
字号：2em；
}
}
.文本{
位置：相对位置；
顶部：3em；
p{
字号：2em；
颜色：黑色；
字体系列：“考山体”，草书；
变换：旋转（15度）；
}
}
}

也许您可以使用skew来代替： （对于90度的旋转，有一个目的，不幸的是，它不会在这里做）

放在一边{
宽度：20%；
最小宽度：20em；
显示：内联块；
垂直对齐：顶部；
背景色：rgba（151,0,0,0.76）；
身高：71.3em；
浮动：左；
文本对齐：居中；
}
撇开h2{
颜色：黑色；
字体系列：“考山体”，草书；
位置：相对位置；
顶部：1米；
字号：2em；
显示：内联块；
变换：倾斜（0,15度）；
}
第一个字母{
字号：3em；
}
除H2P外{
显示：内联；
字号：2em；
}
放一边，文本{
位置：相对位置；
顶部：3em；
}
旁白，文本p{
字号：2em；
颜色：黑色；
字体系列：“考山体”，草书；
变换：倾斜（0,15度）；
}

问候s


文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

也许您可以使用skew来代替： （对于90度的旋转，有一个目的，不幸的是，它不会在这里做）

放在一边{
宽度：20%；
最小宽度：20em；
显示：内联块；
垂直对齐：顶部；
背景色：rgba（151,0,0,0.76）；
身高：71.3em；
浮动：左；
文本对齐：居中；
}
撇开h2{
颜色：黑色；
字体系列：“考山体”，草书；
位置：相对位置；
顶部：1米；
字号：2em；
显示：内联块；
变换：倾斜（0,15度）；
}
第一个字母{
字号：3em；
}
除H2P外{
显示：内联；
字号：2em；
}
放一边，文本{
位置：相对位置；
顶部：3em；
}
旁白，文本p{
字号：2em；
颜色：黑色；
字体系列：“考山体”，草书；
变换：倾斜（0,15度）；
}

问候s


文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

伙计，你救了我一天，非常感谢！，我不知道skew，它很酷shitman你救了我一天，非常感谢！，我不知道skew，它很酷

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