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

[Anonymous]

Я пытаюсь оформить тег привязки следующим образом.
Проблема в том, что я не могу найти способ вырезать правую границу, создавая эффект, показанный на рисунке. изображение.
Обратите внимание, что важно, чтобы цвет фона кнопки был прозрачным и обрезал границу в зависимости от высоты строки текста.
Это то, что я делаю. на данный момент я могу достичь:
Снимок экрана
HTML
Neem contact met ons op

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


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