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 在各个方向上缩放。
position:relative; 和 position:absolute; 属性用于让您将 svg 放在背景中，以便内容可以在其形状之上。
由于形状是在 100 100 的 viewBox 内设计的，并且形状的点范围为 90-100，因此底部和顶部始终存在 10% 的间隙。

形状顶部的三角形基本上总是占其容器的 10%。这就是我们设置 .trap-content 类的 top:10% 和 bottom:10% 的原因。