JSFiddle - React, Tailwind, and code Playground

by Евгений Беляков

HTML

<div class="arr1"></div>

CSS

html {
    background:#eee;
}
.arr1 {
    position:relative;
    border-color: #123 transparent transparent transparent;
    -webkit-transform:skew(-135deg) translate(30px);
    -moz-transform:skew(-135deg) translate(30px);
    -o-transform:skew(-135deg) translate(30px);
    -ms-transform:skew(-135deg) translate(30px);
    transform:skew(-135deg) translate(30px);
}
.arr1:after {
    position:absolute;
    content:'';
    border-color: #789 transparent transparent transparent;
    top:-51px;
    left:-25px;
    -webkit-transform:scale(0.9);
    -moz-transform:scale(0.9);
    -o-transform:scale(0.9);
    -ms-transform:scale(0.9);
    transform:scale(0.9);
}
.arr1,
.arr1:after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 25px 0 25px;
}