Verknüpfungsschaltfläche mit Pfeilseiten mit CSS

Question

Ich frage mich, ob es eine CSS-Lösung gibt, um eine Verknüpfungsschaltfläche wie die folgende anzuzeigen. Irgendwelche Ratschläge?

Answer 1

Sie können einfach Pseudo-Elemente verwenden und einige Eigenschaft border dann die verschiedenen Werte einstellen zu bekommen, was Sie wollen:

.link { 
 
    padding: 10px; 
 
    display: inline-block; 
 
    width: 80px; 
 
    border-top: 1px solid #000; 
 
    border-bottom: 1px solid #000; 
 
    text-align: center; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.link:before,.link:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 30px; 
 
    width: 30px; 
 
    border: 1px solid #000; 
 
    left: -19px; 
 
    top: 3px; 
 
    background: #fff; 
 
    transform: rotate(45deg); 
 
    transform-origin: center; 
 
} 
 
.link:after { 
 
    right: -19px; 
 
    left:auto; 
 
}

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