Diagonal Shapes with CSS -

this question has answer here:

• how create fluid trapezoid image css? 3 answers

what best way create diagonal shape like this pure css maybe using :after , :before pseudo elements on content div? thanks.

maybe it:

.content {    position: relative;    perspective: 100vw;    padding: 30px;  }    .content::before {      content: '';      position: absolute;      z-index: -1;      left: 0;      top: 0;      right: 0;      bottom: 0;      width: 130%;      background: tomato;      transform-origin: 100% 50%;      transform: translate(-25%) rotatey(-20deg);      outline: 1px solid transparent;  }

<div class="content">  lorem ipsum dolor sit amet, consectetur adipisicing elit. repudiandae, laudantium.  lorem ipsum dolor sit amet, consectetur adipisicing elit. voluptate voluptatum recusandae quos soluta impedit! deleniti facere enim, quia ut quisquam.  lorem ipsum dolor sit amet, consectetur adipisicing elit. deleniti eligendi dignissimos adipisci voluptatem voluptate ex maiores consequuntur, cum ducimus voluptatum, ratione similique asperiores reiciendis, odit quis sed. reprehenderit doloribus, delectus.  </div>