Top border is not working with cutting edges

by Kheema Pandey

HTML

<div class="menus">
    			<div class="button btncol1">
    				<a href="#">
    				<p>Contact <br> Us</p>
    				</a>
    			</div>
    			<div class="button btncol4">
    				<a href="#">
    				<p>Employment at Apple</p>
    				</a>
    			</div>
    			<div class="button btncol3">
    				<a href="#">
    				<p>Pysicians & Medical Professionals</p>
    				</a>
    			</div>
    			<div class="button btncol2">
    				<a href="#">
    				<p>Pysicians & Medical Professionals</p>
    				</a>
    			</div>
    			<div class="button btncol1">
    				<a href="#">
    				<p>Patients & Family Members</p>
    				</a>
    			</div>
    		</div>

CSS

.btncol1{
    		background-color: #8cc63e;
    }
    
    .btncol2{
    		background-color: #aadcf3;
    }
    
    .btncol3{
    		background-color: #87868e;
    }
    
    .btncol4{
    		background-color: #c47269;
    }
    
    .btncol5{
    		background-color: #8cc63e;
    }
    
    
    .button:not(:last-child) {
      margin-left: 3px;
    }
    
    
    
    .button:before {
      content: '';
      width: 0px;
      height: 0px;
      display: block;
      border-bottom: 14px solid transparent;
      border-left: 14px solid White;
      position: relative;
      margin-top: -17px;
       margin-left: -14px;
      top: 4px;
      left: 4px;
    
    }
    .button{
      height: 55px;
      padding: 10px;
      width: 100px;
      display: inline-block;
       border-top: 1px solid red;
      text-decoration: none;
      color: white;
      margin: 0;
      float: right;
    	
      transition: all 300ms ease;
         font-size: 14px;
       font-weight: 400;
       font-family: 'Open Sans', sans-serif;
       text-align: left;
    }