html - Trapezoid div in CSS -

i want sections content in trapezoid div don't know how start or best way achieve goal:

i had come across solution there isn't info me understand css3 transform trapezoid

html

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

here way create trapzoid div. uses ::before , ::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? hack way trough css solution i'm going recommend svg

.trap-container {    position: relative;    /*change test responsive*/    width: 400px;    /*change 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 work? svg responsive design scale container.
added preserveaspectratio="none" svg scales in directions.
properties position:relative; , position:absolute; letting put svg in background content can go on top of shape.
since shape designed inside viewbox of 100 100 , points of shape range 90-100 there 10% gap @ bottom , top.

the triangle @ top of shape 10% of container basically. that's why set top:10% , bottom:10% of .trap-content class.