arrows using two triagneles

by techsin

HTML

<div class="arr"> Menu </div>
<div class="arr"> Menu </div>
<div class="arr"> Menu </div>
<div class="arr"> Menu </div>

CSS

.arr {
    cursor: default;
    display: inline-block;
    margin-left: -10px;
    min-width: 100px;
    height: 40px;
    background-color: #007bff;
    position: relative;
    text-align: center;
    line-height: 40px;
    color:white;
    
}
.arr:after {
    content:'';
    position:absolute;
    left: 100%; top: 0;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 13px;
    border-color: transparent transparent transparent #007bff;
    z-index: 5;
}
.arr:before {
    content:'';
    position:absolute;
    left: 100%; top: 0;
    display: block;
    width: 0; height: 0;
    border-style: solid;
    border-width: 20px 0 20px 15px; z-index: 4;
    border-color: transparent transparent transparent white;
}
.arr:first-of-type {margin-left: 0; }