最佳答案
最简单的方法是使用堆叠在容器后面的伪元素,并倾斜它而不是容器元素
.pricing{
margin:0 auto;
width:300px;
position:relative;
padding:20px;
text-align:center;
color:white;
font-size:1.5rem;
font-family:sans-serif;
}
.number{font-size:4rem;}
.pricing:before{
content:"";
position:absolute;
top:0; left:0; right:0; bottom:0;
background:SlateBlue;
transform: skewX(-5deg);
z-index:-1;
}
<div class="pricing">
<p>Student</p>
<p class="number">1234</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas voluptate explicabo vero cumque vitae odit laudantium sapiente unde mollitia deleniti ullam, cum laborum deserunt dolorum soluta nulla dolor accusamus dignissimos!
</p>
</div>
关于html - 旋转左右框边而不是内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48392103/