如何将倾斜盒内的元件固定到正常位置或直线
问题描述:
如何将倾斜盒内的元件固定到正常位置或直线,请检查下面的信息,因为当我输入元素例如图像时,字也倾斜,我想让我们直接做我们需要做的事情?如何将倾斜盒内的元件固定到正常位置或直线
.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>
答
使用伪元素的东西,就像在此之后:
.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