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

Question

如何将倾斜盒内的元件固定到正常位置或直线，请检查下面的信息，因为当我输入元素例如图像时，字也倾斜，我想让我们直接做我们需要做的事情？

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

Answer 1

使用伪元素的东西，就像在此之后：

.slope { 
 
    background: black; 
 
    height:500px; 
 
    width:100%; 
 
    position:relative; 
 
} 
 
.slope::after { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background: inherit; 
 
    z-index:-1; 
 
    bottom: 0; 
 
    transform-origin: right center; 
 
    transform: skewY(-2deg); 
 
} 
 

 
.slope h1{ 
 
    color:#fff; 
 
    float:right; 
 
}

这样的DIV不会倾斜里面所有的内容-2deg