UltiRequiem/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div class="cool red-bg">
      <h2>One</h2>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam culpa
      reiciendis quod tempora totam in unde ullam necessitatibus molestias
      perspiciatis quidem molestiae iure maiores labore eligendi mollitia
      numquam, dolor consequuntur!
    </div>

    <div class="cool blue-bg">
      <h2>Two</h2>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quas,
      officiis voluptates fugit nam dolores earum amet possimus doloremque!
      Reprehenderit itaque expedita illo esse nobis velit aliquid minima.
      Ratione, est?
    </div>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 100">
      <defs>
        <marker
          id="arrowhead"
          markerWidth="10"
          markerHeight="7"
          refX="0"
          refY="3.5"
          orient="auto"
        >
          <polygon points="0 0, 10 3.5, 0 7" />
        </marker>
      </defs>
      <line
        x1="0"
        y1="50"
        x2="250"
        y2="50"
        stroke="#000"
        stroke-width="8"
        marker-end="url(#arrowhead)"
        marker-start="url(#arrowhead)"
      />
    </svg>

    <div class="cool red-bg">
      <h2>Three</h2>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus voluptas
      hic magni ab, exercitationem neque inventore! Expedita nemo blanditiis
      pariatur autem aliquam est perspiciatis, ex molestiae, saepe, sunt maxime
      cumque?
    </div>
  </body>
</html>

## main.css
* {
}

.cool {
  clip-path: polygon(50% 50%, 100% 50%, 50% 100%, 0% 50%);
}

.red-bg {
  background-color: red;
}

.blue-bg {
  background-color: blue;
}
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="main.css" />
	</head>
	<body>
	<div class="cool red-bg">
	<h2>One</h2>
	Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam culpa
	reiciendis quod tempora totam in unde ullam necessitatibus molestias
	perspiciatis quidem molestiae iure maiores labore eligendi mollitia
	numquam, dolor consequuntur!
	</div>

	<div class="cool blue-bg">
	<h2>Two</h2>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quas,
	officiis voluptates fugit nam dolores earum amet possimus doloremque!
	Reprehenderit itaque expedita illo esse nobis velit aliquid minima.
	Ratione, est?
	</div>

	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 100">
	<defs>
	<marker
	id="arrowhead"
	markerWidth="10"
	markerHeight="7"
	refX="0"
	refY="3.5"
	orient="auto"
	>
	<polygon points="0 0, 10 3.5, 0 7" />
	</marker>
	</defs>
	<line
	x1="0"
	y1="50"
	x2="250"
	y2="50"
	stroke="#000"
	stroke-width="8"
	marker-end="url(#arrowhead)"
	marker-start="url(#arrowhead)"
	/>
	</svg>

	<div class="cool red-bg">
	<h2>Three</h2>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus voluptas
	hic magni ab, exercitationem neque inventore! Expedita nemo blanditiis
	pariatur autem aliquam est perspiciatis, ex molestiae, saepe, sunt maxime
	cumque?
	</div>
	</body>
	</html>
	* {
	}

	.cool {
	clip-path: polygon(50% 50%, 100% 50%, 50% 100%, 0% 50%);
	}

	.red-bg {
	background-color: red;
	}

	.blue-bg {
	background-color: blue;
	}