Trapezoid Div In CSS

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: I had come across this solution but there isn't much info

Solution 1:

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>

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>

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.

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.