JSFiddle - React, Tailwind, and code Playground

by Pik_at

HTML

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

CSS

.arrow {
    width:100px;
    height:50px;
    background-color: red;
    position: relative;
    float: left;
}
.arrow:before,
.arrow:after{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 25px 50px;
    position: absolute;
    top: 0;
}
.arrow:before {
    left:0;
    border-color: transparent transparent transparent #fff;
}
.arrow:after {
    right:-50px;
}

.arrow-left {
    z-index:1;
    background-color: red;
}
.arrow-left:after {
    border-color: transparent transparent transparent red;
}

.arrow-right {
    margin-left: 10px;
    background-color: blue;
}
.arrow-right:after {
    border-color: transparent transparent transparent blue;
}