<div class="container">
        <ul class="pager">
            <li class="pager-item">Step 1</li>
            <li class="pager-item">Step 2</li>
            <li class="pager-item">Step 3</li>
            <li class="pager-item">Step 4</li>
        </ul>
    </div>  

body {
    box-sizing: border-box;
    font: 16px Arial, sans-serif;
    color: #000;
}

.container {
    width: 100%;
    height: 50px;
    
    text-align: center;
}

.pager li {
    display: inline-block;
}

.pager-item {
    padding: 20px;
    width: 20%;
    height: 10px;
    text-align: center;
    border: -30px -30px 0 0 solid #fff;
    transition: .3s linear;
  background: linear-gradient(to top, #ccc, #999, #ccc);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
}

.pager-item:hover {
    color: #fff;
    background: linear-gradient(to top, #9C0,#690,#9C0);
}