JSFiddle - React, Tailwind, and code Playground

HTML

<div class="border-arrow"></div>  
<div class="skew-arrow"></div>

CSS

.border-arrow,
.skew-arrow {
  position: relative;
}

.border-arrow:before,
.border-arrow:after {
  content:'';
  position: absolute;
  width:0;
  height:0;
}
.border-arrow:before {
  left: 0;
  border-top: 100px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 100px solid #E55F20;
  border-right: 50px solid #E55F20;
}
.border-arrow:after {
  left: 100px;
  border-top: 100px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #DD591B;
  border-left: 50px solid #DD591B;
}

.skew-arrow {
  margin-left: 300px;
  width: 300px;
  height: 170px;
  overflow: hidden;
}
.skew-arrow:before,
.skew-arrow:after {
  content:'';
  position: absolute;
  top: 0;
  width: 100px;
  height:200px;
}
.skew-arrow:before {
  left: 0;
  background: #E55F20;
  transform-origin: top right;
  transform: skewY(120deg);
}
.skew-arrow:after {
  left:100px;
  background: #DD591B;
  transform-origin: top left;
  transform: skewY(-10deg);
}