Estou tentando estilizar uma tag âncora assim:
O problema que tenho é que não consigo descobrir uma maneira de cortar a borda direita, criando o efeito mostrado na imagem. Note que é importante que a cor de fundo do botão seja transparente e corte a borda com base na altura da linha do texto.
Isto é o que consigo alcançar atualmente:
a {
display: inline-block;
color: red;
text-decoration: none;
position: relative;
text-align: center;
padding: 10px 20px;
}
a::before {
content: "";
width: 100px;
border: 1px solid red;
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 100%;
}<a href="#">Neem contact met ons op</a>