CSS中的梯形div

Question

我想要一个内容为梯形div的部分，但我不知道如何开始或实现目标的最佳方式是什么：

我遇到过这个解决方案，但我没有太多信息可以理解CSS3 Transform to Trapezoid

HTML

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

Answer 1

这是一种创建像div这样的陷阱的方法。 这使用 :: before 和 :: 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通过设计响应，因此它将始终扩展到其容器 添加了preserveAspectRatio =“none”，以便svg在所有方向上缩放 属性位置：相对; 和位置：绝对; 用于让您将svg放在后台，以便内容可以在其形状之上。
由于形状设计在一个100 + 100的视图框内，并且形状的点在90-100之间，因此底部和顶部总是有10％的间隙。

形状顶部的三角形基本上总是其容器的10％。这就是我们设置顶部的原因：10％和底部：.trap-content类的10％。