How to overflow the content of an anchor tag over it's own border, creating a cut out effect?

Question

I am trying to style an anchor tag like this:

The problem I have is that I am unable to figure out a way to cut out the right border, creating the effect shown in the image. Note that it is important that the button background color is transparent and cuts out the border based on the line-height of the text.

This is what I'm currently able to achieve:

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>

Answer 1

Probably easiest, if you assemble the border out of three parts. The element itself gets a border-left only, and then you use two pseudo elements for the top and bottom part, respectively. (I've used different colors here for each part, so you can easily see which is which.)

Play with the top / bottom percentages, if you want the partial borders on the right to be longer / shorter.

a {
  display: inline-block;
  color: red;
  text-decoration: none;
  position: relative;
  text-align: center;
  padding: 10px 20px;
  border-left: 1px solid green;
}

a::before,
a::after {
  content: "";
  width: 100px;
  position: absolute;
  left: 0;
}

a::before {
  top: 0;
  bottom: 80%;
  border-top: 1px solid red;
  border-right: 1px solid red;
}

a::after {
  top: 80%;
  bottom: 0;
  border-bottom: 1px solid blue;
  border-right: 1px solid blue;
}

<a href="#">Neem contact met ons op</a>