JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="arrow"></div>
    <div class="arrow" style="height: 40px;"></div>
    <div class="arrow" style="height: 150px;"></div>
</body>

CSS

/**
 * css3 arrow
 */
html { height: 100% }
body {
	height: 100%;
	background: linear-gradient(45deg, #B6D9F8, #FFBEBE);
	}
.arrow {
    position: relative;
    margin-bottom: 6px;
    height: 80px;
    width: 200px;
    border: 2px solid #f00;
    border-right: 0;
    }
    .arrow:before,
    .arrow:after {
        content: '';
        position: absolute;   
        left: 100%;
        height: 50%;
        width: 0;
        margin-left: -2px;
        border-right: 2px solid #f00;
    }
    .arrow:before {        
        top: 0;
        -webkit-transform: skew(20deg, 0deg);
        -moz-transform: skew(20deg, 0deg);
        -ms-transform: skew(20deg, 0deg);
        -o-transform: skew(20deg, 0deg);
        transform: skew(20deg, 0deg);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    .arrow:after {
        bottom: 0;
        -webkit-transform: skew(-20deg, 0deg);
        -moz-transform: skew(-20deg, 0deg);
        -ms-transform: skew(-20deg, 0deg);
        -o-transform: skew(-20deg, 0deg);
        transform: skew(-20deg, 0deg);
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }