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 class.

的 top:10% 和 bottom:10%

CSS 中的梯形 div

Trapezoid div in CSS

html

css

css-shapes