Как переполнить содержимое тега привязки за его собственную границу, создав эффект вырезания? ⇐ CSS

[Anonymous]

Я пытаюсь оформить тег привязки следующим образом:


Проблема в том, что я не могу найти способ вырезать правую границу, создав эффект, показанный на изображении.
Обратите внимание, что важно, чтобы цвет фона кнопки был прозрачным и вырезался граница зависит от высоты строки текста.
Это то, чего я сейчас могу достичь:

Код: Выделить всё

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%;
}

Код: Выделить всё

[url=#]Neem contact met ons op[/url]

Подробнее здесь: https://stackoverflow.com/questions/793 ... ating-a-cu