JSFiddle - React, Tailwind, and code Playground

by basmaat

HTML

<div class="arrow left"></div>
<div class="arrow up"></div>
<div class="arrow down"></div>
<div class="arrow right"></div>

CSS

.arrow {
    position: relative;
    background: #CCC;
    margin: 20px;
    border: 5px #444 solid;
    float: left;
}

.arrow:before {
    content: " ";
    position: absolute;
    width: 18px;
    height: 18px;
    background: #CCC;
    border: 5px #444 solid;
    z-index: -2;
    
    -webkit-transform: rotate(45deg);  
    -moz-transform: rotate(45deg);  
    -ms-transform: rotate(45deg);  
    -o-transform: rotate(45deg);  
    transform: rotate(45deg);  
    filter: progid:DXImageTransform.Microsoft.Matrix( 
        M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
    zoom: 1;
}

.arrow:after {
    content: " ";
    position: absolute;
    background: white;
    z-index: -1;
}




.up {
    width: 10px;
    height: 30px;
    border-top: 0;
}

.up:before {
    margin-top: -14px;
    margin-left: -9px;
}

.up:after {
    width: 40px;
    height: 30px;
    border-top: 5px #444 solid;
    margin-left: -15px;
}




.down {
    width: 10px;
    height: 30px;
    margin-top: 0px;
    border-bottom: 0;
}

.down:before {
    margin-top: 16px;
    margin-left: -9px;
}

.down:after {
    width: 40px;
    height: 30px;
    border-bottom: 5px #444 solid;
    margin-top: -5px;
    margin-left: -15px;
}




.left {
    width: 30px;
    height: 10px;
    border-left: 0;
}

.left:before {
    margin-top: -9px;
    margin-left: -14px;
}

.left:after {
    width: 30px;
    height: 40px;
    border-left: 5px #444 solid;
    margin-top: -15px;
}




.right {
    width: 30px;
    height: 10px;
    border-right: 0;
}

.right:before {
    margin-top: -9px;
    margin-left: 16px;
}

.right:after {
    width: 30px;
    height: 40px;
    border-right: 5px #444 solid;
    margin-top: -15px;
    margin-left: -5px;
}