CSS中的梯形div [英] Trapezoid div in CSS

问题描述

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

I want sections with content in a trapezoid div but I don't know how to start or what the best way is to achieve my goal:

我遇到了这个解决方案，但没有太多信息让我了解 CSS3变换到梯形

I had come across this solution but there isn't much info for me to understand CSS3 Transform to Trapezoid

HTML

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

推荐答案

这里有一种方法来创建像div这样的trapzoid。
这使用 :: before 和 :: after 伪元素

Here is a way to create a trapzoid like div. This uses the ::before and ::after pseudo elements

.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

Responsive? I could just hack my way trough a css solution but I'm going to recommend 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放在背景中，以便内容可以在其形状之上。

由于形状是设计的内部的viewBox为100 100，形状点的范围从90-100，那么在底部和顶部总是有10％的差距。

How does it work? SVG is responsive by design so it will always scale to its container.
Added the preserveAspectRatio="none" so the svg scales in all directions.
The properties position:relative; and position:absolute; are for letting you put the svg in the background so content can go on top of its shape.
Since the shape is designed with inside a viewBox of 100 100 and the points of the shape range from 90-100 then there is a always a 10% gap at the bottom and top.

三角形在顶部的形状将总是10％的容器基本上。这就是为什么我们设置顶部：10％和底部：10％的.trap-content类。

The triangle at the top of the shape will always be 10% of its container basically. That's why we set the top:10% and bottom:10% of the .trap-content class.

这篇关于CSS中的梯形div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！