JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

<title>テスト</title>


<link rel="stylesheet" href="./css/style.css">

</head>

<body>

<!-- partial:index.partial.html -->
<section>
  <div class="inner">
    <h1>Title</h1>
    <p>Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. </p>
  </div>
</section>
<section class="slant-section">
<div class="top-img"></div>
  <div class="inner">
    <h2>Slant Layout</h2>
    <p>Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. </p>
    <p>Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. </p>
    <p>Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. </p>
  </div>
</section>
<section>
  <div class="inner">
    <h2>Title</h2>
    <p>Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. </p>
  </div>
</section>

    <section class="slant-section">
  <div class="inner">
    <h2>Slant Layout</h2>
    <p>Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. </p>
    <p>Sample...

CSS

body {
  margin: 0;
  background: #fff;
}

section {
  position: relative;
  box-sizing: border-box;
}
section .inner {
  position: relative;
  padding: 50px;
  max-width: 1024px;
  margin: auto;
}

.slant-section {
  margin: 200px auto; /* 白余白 */
  background: #c90b0b;
}

@media screen and (max-width:350px) { 
    .slant-section{
        margin: 20px auto;
    }
}

.slant-section:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 20vw;
  top: -20vw;
  background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/100% 100%
}

.slant-section:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 20vw;
  bottom: -20vw;
  background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat bottom right/100% 100%
}

.top-img::after {
  content: "";
  display: block;
  position: absolute;
  top: -47vw;
  right: 0;
  width: 60vw;
  height: 100vw;
  background: url(https://uploda4.ysklog.net/c20a6d522fafe57d114e96c58725788c.jpg) no-repeat;
  background-size: contain;
  background-position: top right;
  mix-blend-mode: multiply; 
  opacity: 0.7;
}

.slant-section + section:before {
  content: "";
  display: block;
  position: absolute;
  top: -50px;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: skewY(-10deg);
}