СSS как сделать такие ссылки?

.link { 
  display: inline-block; 
  background: #ccc; 
  text-align: center; 
  padding: 15px 25px 0; 
  position: relative; 
  color: #555; 
  text-decoration: none; 
} 
 
.link:after { 
  content: ''; 
  position: absolute; 
  top: 100%; 
  left: 50%; 
  width: 0; 
  height: 0; 
  border-style: solid; 
  border-width: 20px 40px 0 40px; 
  border-color: #ccc transparent transparent transparent; 
  transform: translateX(-50%); 
} 
 
.link:hover { 
  color: #fff; 
  background: orange; 
} 
 
.link:hover:after { 
  border-top-color: orange; 
}

<a href="#" class="link">Link</a>