JSFiddle - React, Tailwind, and code Playground

by shravan

HTML

<div style="width:160px;">
<div class='inner-arrow-left'>
ertdfygh
</div>
<div class='arrow-right'>
</div>
</div>
<br/><br/><br/>
<div class='inner-arrow-left1'>
ertdfygh
</div>

CSS

.inner-arrow-left {
  width: 0; 
  height: 0; 
  border-top: 20px solid red;
  border-bottom: 20px solid red;
  border-left: 20px solid transparent;
  border-right: 20px solid red;
  float:left;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid red;
  float:right;
}


.inner-arrow-left1 {
  width: 100px; 
  height: 50px; 
  border-top: 20px solid red;
  border-bottom: 20px solid red;
  border-left: 20px solid transparent !important;
  border-right: 20px solid red;
  float:left;
}