Html 如何将斜盒内的元件固定到正常位置或直线位置

如何将斜框内的元素固定在正常位置或直线上，请检查以下信息，因为当我输入元素（例如图像）时，单词也是斜的，我想使它变直我们需要做什么

.box.side {
  margin-top: 48vh;
  height: 48vh;
}

.container {
  display: block;
  width: 100%;
  overflow: hidden;
}

.slope {
  margin: 0 -100px;
  transform-origin: right center;
  background: black;
  transform: rotate(-2deg);
}

<div class="container">
  <div class="box side slope">
      <h1> sample </h1>
  </div>
</div>

.box.side{
边际上限：48vh；
高度：48vh；
}
.集装箱{
显示：块；
宽度：100%；
溢出：隐藏；
}
.斜坡{
利润率：0-100px；
变换原点：右中心；
背景：黑色；
变换：旋转（-2deg）；
}
样品

---

在如下内容之后使用伪元素：

.slope{
背景：黑色；
高度：500px；
宽度：100%；
位置：相对位置；
}
.slope：：在{
宽度：100%；
身高：100%；
位置：绝对位置；
背景：继承；
z指数：-1；
底部：0；
变换原点：右中心；
变换：歪斜（-2deg）；
}
·斜坡h1{
颜色：#fff；
浮动：对；
}