Html CSS中的梯形div

我想要内容为梯形

div

的部分，但我不知道如何开始，也不知道实现目标的最佳方式：

我曾经遇到过这个解决方案，但是没有太多的信息让我理解

HTML

满足于此

这里有一种创建类似trapzoid的div的方法。 这将使用：before和：after伪元素

。示例{
利润率：20px 0px；
位置：相对位置；
显示：内联块；
宽度：200px；
高度：200px；
背景颜色：灰色；
颜色：白色；
字号：2rem；
}
.示例：：之前{
内容：“；
位置：绝对位置；
顶部：-20px；
边框顶部：20px实心透明；
左边框：0px实心透明；
右边框：200px纯色灰色；
边框底部：0px纯色灰色；
}
.示例：：之后{
内容：“；
位置：绝对位置；
底部：-20px；
边框底部：20px实心透明；
左边框：0px实心透明；
右边框：200px纯色灰色；
边框顶部：0px纯色灰色；
}

范例

基本上，您需要旋转容器，并添加一些透视图（3d变换）。你可以看一看的想法和信息。如果您使用的是

rotateX

，您的示例将需要

rotateY

。您可能会发现有趣的。。。或者甚至我可以让它响应+边界需要100%

<div class="section">
    <p>content here</p>
</div>