<section class="section">
  <svg class="section__svg-bg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <mask id="mask-red" x="0" y="0" height="100%" width="100%">
        <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
        <svg width="100%" height="100%" viewBox="0 0 1920 30" preserveAspectRatio="xMidYMin meet">
          <polygon points="0 30 1920 0 0 0" fill="#000"/>
        </svg>
        <svg width="100%" height="100%" viewBox="0 0 1920 16" preserveAspectRatio="xMidYMax meet">
          <polygon points="0 16 1920 0 1920 16" fill="#000"/>
        </svg>
      </mask>

      <mask id="mask-gray" x="0" y="0" height="100%" width="100%">
        <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
        <svg width="100%" height="100%" viewBox="0 0 1920 24" preserveAspectRatio="xMidYMin meet">
          <polygon points="1920 24 1280 1 646 24 0 0 1920 0" fill="#000" />
        </svg>
        <svg width="100%" height="100%" viewBox="0 0 1920 21" preserveAspectRatio="xMidYMax meet">
          <polygon points="0 2 646 20 1280 0 1920 21 0 21" fill="#000" />
        </svg>
      </mask>
    </defs>

    <rect width="100%" height="100%" fill="#ef4138" mask="url(#mask-red)" />
    <rect width="100%" height="100%" fill="#515561" mask="url(#mask-gray)" />
  </svg>

  <div class="section__content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo quia pariatur facere voluptates. Quaerat est ab neque rem a illum deserunt doloremque velit fugiat voluptatibus nam vel facere non, reiciendis iusto tenetur rerum nemo reprehenderit hic odio dolorem quos ex sunt laborum. Cumque dolores delectus omnis cupiditate, necessitatibus voluptates officiis repellat magnam velit! Harum ipsa, maxime ratione fuga non inventore doloribus? Magni corporis beatae ex doloremque fugiat iusto ipsa officiis deleniti consequatur possimus fugit est quidem illo alias hic eaque, sed, error excepturi. Fugiat, vitae. Necessitatibus incidunt maxime id, ea inventore deleniti blanditiis deserunt in eveniet alias delectus, cupiditate perspiciatis!
  </div>
</section>

.section {
  position: relative;
  color: #fff;
  font-family: sans-serif;
  z-index: 0;
}

.section__svg-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.section__content {
  padding: calc(1.25% + 20px) 20px calc(1.09375% + 20px);
}