Html Question posted in
Some basic documentation can be found here.

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

I am trying to style an anchor tag as following

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:

Screenshot

HTML

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

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

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Playing with gradients:

    a {
  --t: 2px; /* thickness */

  display: inline-block;
  font-size: 25px;
  color: red;
  text-decoration: none;
  padding: .5em 1em;
  border-image: linear-gradient(90deg,currentColor 50%,#0000 0) 1/var(--t);
  background: linear-gradient(currentColor calc(50% - .5lh), #0000 0 calc(50% + .5lh), currentColor 0) 50%/var(--t) 100% no-repeat
}
    <a href="#">Neem contact met ons op</a>

    You can add another variable to control the offset:

    a {
  --t: 2px; /* thickness */
  --o: 50%;  /* offset */

  display: inline-block;
  font-size: 25px;
  color: red;
  text-decoration: none;
  padding: .5em 1em;
  border-image: linear-gradient(90deg,currentColor var(--o),#0000 0) 1/var(--t);
  background: linear-gradient(currentColor calc(50% - .5lh), #0000 0 calc(50% + .5lh), currentColor 0) var(--o)/var(--t) 100% no-repeat
}
    <a href="#">Neem contact met ons op</a>
<br>
<br>
<a href="#" style="--o:20%">Neem contact met ons op</a>
<br>
<br>
<a href="#" style="--o:70%">Neem contact met ons op</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search