JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chevronUp"></div>
	<div id="chevronDown"></div>

CSS

/*------CHEVRONS------*/

#chevronUp {
  position: fixed;
  left:50%;
  top:5%;
  text-align: center;
  padding: 0px;
  margin-bottom: 0px;
  height: 8px;
  width: 100px;
}

#chevronDown {
  position: fixed;
  left:50%;
  bottom:5%;
  text-align: center;
  padding: 0px;
  margin-bottom: 0px;
  height: 8px;
  width: 100px;
  z-index:10;
}

#chevronUp:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: #3c3f44;
  -webkit-transform: skew(0deg, -35deg);
  -moz-transform: skew(0deg, -35deg);
  -ms-transform: skew(0deg, -35deg);
  -o-transform: skew(0deg, -35deg);
  transform: skew(0deg, -35deg);
}

#chevronDown:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: #3c3f44;
  -webkit-transform: skew(0deg, 35deg);
  -moz-transform: skew(0deg, 35deg);
  -ms-transform: skew(0deg, 35deg);
  -o-transform: skew(0deg, 35deg);
  transform: skew(0deg, 35deg);
}

#chevronUp:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: #3c3f44;
  -webkit-transform: skew(0deg, 35deg);
  -moz-transform: skew(0deg, 35deg);
  -ms-transform: skew(0deg, 35deg);
  -o-transform: skew(0deg, 35deg);
  transform: skew(0deg, 35deg);
}​{}

#chevronDown:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: #3c3f44;
  -webkit-transform: skew(0deg, -35deg);
  -moz-transform: skew(0deg, -35deg);
  -ms-transform: skew(0deg, -35deg);
  -o-transform: skew(0deg, -35deg);
  transform: skew(0deg, -35deg);
}​