JSFiddle - React, Tailwind, and code Playground

by johnoscott

HTML

<div class="chevron" >text insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext insidetext inside</div><br>
<div class="chevron rotate180" ></div>

CSS

.chevron {
  position: relative;
  padding: 0px;
  height:170px;
  width: 200px;
  margin-left:0px;
  margin-top:0px;
  color:yellow;
}

.chevron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  width: 100%;
  background: gray;
  -webkit-transform: skew(25deg, 0deg);
  -moz-transform: skew(25deg, 0deg);
  -ms-transform: skew(25deg, 0deg);
  -o-transform: skew(25deg, 0deg);
  transform: skew(25deg, 0deg);
}

.chevron:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  height: 50%;
  width: 100%;
  background: gray;
  -webkit-transform: skew(-25deg, 0deg);
  -moz-transform: skew(-25deg, 0deg);
  -ms-transform: skew(-25deg, 0deg);
  -o-transform: skew(-25deg, 0deg);
  transform: skew(-25deg, 0deg);
}

.rotate180
{
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);

}