倾斜div的顶部和底部答案

【问题标题】：Skewing both top and bottom of div倾斜div的顶部和底部
【发布时间】：2020-09-21 02:35:49
【问题描述】：

我正在尝试倾斜 div 的顶部和底部以创建一个形状，然后我可以在其中插入背景图案，但是，经过几个小时的研究，我无法真正想出一个可靠的解决方案。从某种意义上说，我已经快到了，我需要做的只是倾斜底部，但我正在寻求一些帮助或指导。

我希望底部反映顶部的倾斜。有什么建议吗？

#test {
  position: relative;
  width: 100%;
  height: 400px;
}

.bg {
  width: 50%;
  height: 800px;
  -webkit-transition: all 300ms ease-in;
  background: black;
  border-radius: 80px 0px 0px 80px;
  position: absolute;
  right: 0;
  top: 0;
  -ms-transform: skewY(-9deg);
  -webkit-transform: skewY(-9deg);
  transform: skewY(-9deg);
}

<section id="test">
  <div class="bg"></div>
</section>

我目前拥有的示例 https://jsfiddle.net/3atsj1e5/

【问题讨论】：

标签： html css css-transforms skew

【解决方案1】：

通过一些旋转和透视你可以做到：

.box {
  margin-left: auto;
  width: 200px;
  height: 450px;
  transform-origin: right;
  transform: perspective(100px) rotateY(-10deg);
  border-radius: 40px 0 0 40px;
  overflow: hidden;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(https://picsum.photos/id/1074/400/800) center/cover;
  transform-origin:inherit;
  transform: perspective(100px) rotateY(10deg);
}

body {
  margin: 0;
  background:#eee;
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：