html - 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>

react 灵敏？ 我可以通过 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% 的间隙。

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