JSFiddle - React, Tailwind, and code Playground

by rigor789

HTML

<section>
  <div class="arrows">
    <span></span>
    <span></span>
    <span></span>
  </div>

  <div class="wrap">
    Content here..
  </div>
</section>

SCSS

section {
  background: #999;
  position: relative;
  display: flex;
  height: 250px;
  box-sizing: border-box;
}

.wrap {
  padding: 100px;
  padding-left: 40%;
}

.arrows {
  $height: 1200px;
  $width: 100px;

  position: absolute;
  left: -100px;
  max-height: 250px;
  overflow: hidden;
  display: flex;
  flex-direction: row-reverse;

span {
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: $height/2 0 $height/2 $width;
    top: -480px;
  }
  span:nth-of-type(1) {
    border-color: transparent transparent transparent #007bff;
  }
  span:nth-of-type(2) {
    border-color: transparent transparent transparent #eeeeee;
    left: $width/2;
  }
  span:nth-of-type(3) {
    border-color: transparent transparent transparent #222222;
    left: $width;
  }
}