向左旋转＆amp;右边的边框而不是内容

Question

我想完成下面的图片：

不旋转盒子本身，只有左边和右边的边框。对。图像仅显示左和右;右边界有几个角度。

我试过了border-bottom-right-radius＆amp; transform: rotate()。

Answer 1

如果您在容器上设置了before并将其设置为蓝色背景，则只需使用skewX或skewY即可获得所需的效果。

.block:before{
    content:"";
    display:block;
    position:absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    background:blue;
    transform: skewX(10deg);
}

https://codepen.io/dangvanthanh/pen/EbKlw会让你看看它是如何运作的

您可以在MDN https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew

中获取更多信息

Answer 2

你可以做的是将变换应用于父元素，逆对其子元素进行变换

div {
    transform: skew(20deg);
}

div .child {
    transform: skew(-20deg);
}

Answer 3

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;