倾斜div的顶部和底部

Question

我正在尝试倾斜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/

的示例

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

<div class="box"></div>