JSFiddle - React, Tailwind, and code Playground

by masaab algailani

HTML

<div class="arrow-right"></div>
<div class="triangle-right"><div></div></div>

CSS

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  
  border-left: 30px solid #E75F2E;
}
.triangle-right {
    width: 0;
    height: 0;
    padding-top: 20%;
    padding-bottom: 20%;
    padding-left: 20%;
    overflow: hidden;
}
.triangle-right div {
    width: 0; 
    height: 0;
    margin-top:-60px;
    margin-left: -60px;
     
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid #4679BD;
}