我想要内容为梯形的部分div但我不知道如何开始或实现我的目标的最佳方法是什么：
我遇到过这个解决方案，但没有太多信息可供我理解CSS3 转换为梯形
HTML
<div class="section">
<p>content here</p>
</div>
这是创建类似梯形的 div 的方法。 这使用了::before and ::after伪元素
.example {
margin: 20px 0px;
position: relative;
display: inline-block;
width: 200px;
height: 200px;
background-color: gray;
color: white;
font-size: 2rem;
}
.example::before {
content: "";
position: absolute;
top: -20px;
border-top: 20px solid transparent;
border-left: 0px solid transparent;
border-right: 200px solid gray;
border-bottom: 0px solid gray;
}
.example::after {
content: "";
position: absolute;
bottom: -20px;
border-bottom: 20px solid transparent;
border-left: 0px solid transparent;
border-right: 200px solid gray;
border-top: 0px solid gray;
}<div class="example">
<p>Example</p>
</div>有反应吗？ 我可以通过 css 解决方案来破解，但我会推荐 svg
.trap-container {
position: relative;
/*Change this to test responsive*/
width: 400px;
/*change this to test responsive*/
height: 150px;
}
.trap-container svg {
position: absolute;
}
.trap-content {
display: inline-block;
position: relative;
top: 10%;
height: 80%;
width: 100%;
bottom: 10%;
color: white;
}<div class="trap-container">
<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<polygon points="0,10 100,0 100,100 0,90">
</polygon>
</svg>
<div class="trap-content">Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,
Lorem ipsum dollar si amet.
</div>
</div>它是如何工作的？ SVG 在设计上是响应式的，因此它始终会扩展到其容器。
添加了serveAspectRatio =“none”，以便svg在所有方向上缩放。
属性职位：亲属； and 位置：绝对；用于让您将 svg 放在背景中，以便内容可以位于其形状之上。
由于形状的设计内部 viewBox 为 100 100，并且形状的点范围为 90-100，因此底部和顶部始终有 10% 的间隙。
形状顶部的三角形基本上始终是其容器的 10%。这就是为什么我们设置.trap-content类的top:10%和bottom:10%。