html - 旋转左右框边而不是内容

Question

我想完成下图:

不旋转盒子本身，只旋转左右边界。该图像仅显示左右边框倾斜了几个 %。

我试过 border-bottom-right-radius 和 transform: rotate()。

Answer 1

最简单的方法是使用堆叠在容器后面的伪元素，并倾斜它而不是容器元素

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