JSFiddle - React, Tailwind, and code Playground

by Markov88

HTML

<div class="container">

  <div class="box"> 
  <div class='arrow-right'></div>
  </div>
  
   <div class="box"> 
  <div class='arrow-right'></div>
  </div>
  
</div>

CSS

.container {
  display: flex;
  flex-direction: row;
  align-content: center;
}
.box {
  height: 50px;
  width: 50%;
  background-color: #ddd;
  border: 1px solid red;
  position:relative;
}
.arrow-right{
  position:absolute;
 right:-.6rem;
 z-index:2;
 top:50%;
 transform:translateY(-50%);
     width: 0.6rem;
    height: 1rem;
    
}
 .arrow-right::after{
   z-index:3;
       position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid;
    border-width: 0.6rem 0 0.6rem 0.6rem;
    right: 2px;
    border-left-color: #ddd;
     overflow:hidden;
 }
 .arrow-right::before{
    right: 0;
    z-index:3;
 
       position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid;
    border-width: 0.6rem 0 0.6rem 0.6rem;
    border-left-color: red;
         
 }