<section>
  <h2>SVG background</h2>
  <div class="links"><a href="https://yoksel.github.io/url-encoder/" target="_blank">URL-encoder for SVG</a></div>

  <div class="svg-bg">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam cumque quidem itaque voluptatem error modi minima atque nihil similique earum dolores perferendis exercitationem vel incidunt numquam quos nulla, odio repellendus, sed facere ea laborum eius sapiente. Quos est a aliquid hic deserunt. Quia nobis quae iure facilis laborum eum, veniam laboriosam incidunt amet quibusdam natus, rerum voluptates illum obcaecati tempora labore porro possimus deleniti culpa molestiae praesentium cum a quisquam? Commodi architecto quaerat possimus minus eos dolorum culpa iste doloribus explicabo. Numquam vitae vel molestiae nobis, quas excepturi dolorum blanditiis repellendus sint a animi ad minus rem ea sit quisquam?
  </div>
</section>

<hr style="margin-top: 40px">

<section>
  <h2>CSS clip-path polygon</h2>
  <div class="link"><a href="https://yoksel.github.io/relative-clip-path/" target="_blank">Convert SVG absolute clip-path to relative</a></div>
  <div class="link"><a href="https://qna.habr.com/q/645089#answer_1413966" target="_blank">Как получить из SVG координаты для css clip-path?</a></div>

  <div class="css-clip">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam cumque quidem itaque voluptatem error modi minima atque nihil similique earum dolores perferendis exercitationem vel incidunt numquam quos nulla, odio repellendus, sed facere ea laborum eius sapiente. Quos est a aliquid hic deserunt. Quia nobis quae iure facilis laborum eum, veniam laboriosam incidunt amet quibusdam natus, rerum voluptates illum obcaecati tempora labore porro possimus deleniti culpa molestiae praesentium cum a quisquam? Commodi architecto quaerat possimus minus eos dolorum culpa iste doloribus explicabo. Numquam vitae vel molestiae nobis, quas excepturi dolorum blanditiis repellendus sint a animi ad minus rem ea sit quisquam?
  </div>
</section>

.svg-bg,
.css-clip {
  color: #fff;
  font-family: sans-serif;
  padding: 25px 15px;
  margin-top: 15px;
}

/* ==================== */

.svg-bg {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='290'%3E%3Cpolygon points='0 30 0 290 1920 274 1920 0 0 30' fill='%23ef4138'/%3E%3Cpolygon points='0 0 646 24 1280 0 1920 24 1920 290 1280 269 646 290 0 271 0 0' fill='%23515561'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}

/* ==================== */

.css-clip {
  position: relative;
  z-index: 0;
}

.css-clip::before,
.css-clip::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.css-clip::before {
  background-color: #ef4138;
  z-index: -2;
  clip-path: polygon(0% 10.3%, 0% 100%, 100% 94.5%, 100% 0%);
}

.css-clip::after {
  background-color: #515561;
  z-index: -1;
  clip-path: polygon(
    0% 0%,
    33.6% 8.3%,
    66.7% 0%,
    100% 8.3%,
    100% 100%,
    66.7% 92.8%,
    33.6% 100%,
    0% 93.4%
  );
}

/* ============= misc ============= */

h2, a {
  font-family: monospace;
}

.link {
  display: block;
}