Cut out a piece of a border on button with transparent background

问题

Hello I am trying to figure out how to create the following button

Making the button is easy, but the tricky part is creating that little cut out on the right. The button has a transparent background so I cant stick a psuedo element there with a background color to overlap it.

Any Ideas?

HTML:

<div>
  <a>view profile</a>
</div>

CSS:

div {
  width: 500px;
  height: 500px;
  background: url("https://www.sammobile.com/wp-content/uploads/2017/08/note-8-wallpaper-4.png") center center / cover no-repeat;
}

a {
    background-color: transparent;
    width: 320px;
    height: 80px;
    line-height: 80px;
    font-size: 30px;
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: center;
    border: 2px solid #ccb58d;
}

Here is a jsfiddle with a recreation of the button to play with

https://jsfiddle.net/0ypp6m9c/

Thanks

回答1:

You could use CSS gradients to achieve this:

div {
  width: 500px;
  height: 500px;
  background: url("https://www.sammobile.com/wp-content/uploads/2017/08/note-8-wallpaper-4.png") center center / cover no-repeat;
}

a {
    background-color: transparent;
    background-image:linear-gradient(to bottom, #ccb58d 31px, rgba(255, 255, 255, 0) 0%);
    background-position: right -57px;
    background-size: 2px 55px;
    background-repeat: repeat-y;
    width: 320px;
    height: 80px;
    line-height: 80px;
    font-size: 30px;
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: center;
    border: 2px solid #ccb58d;
    border-right: none;
}

<div>
  <a>view profile</a>
</div>

The key properties are:

background-image: A vertical linear gradient is set as background image. The second parameter sets the color and height of the border segments.
background-repeat: The background repeats vertically, so there are two segments
background-position: Here we put the background to the right and move it vertically to position the transparent space in the middle
background-size: The horizontal size lets us set the width of the border and the vertical size sets the size of the repeated image. Combining it with the second parameter of the linear-gradient function, we can change the size of the segments.

回答2:

It will involve adding a linear gradient as a type of pseudo-right-border.

div {
  width: 500px;
  height: 500px;
  background: url("https://www.sammobile.com/wp-content/uploads/2017/08/note-8-wallpaper-4.png") center center / cover no-repeat;
}

a {
    background-color: transparent;
    width: 320px;
    height: 80px;
    line-height: 80px;
    font-size: 30px;
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: center;
    border-width: 2px 0 2px 2px;
    border-style: solid;
    border-color: #ccb58d;
    position: relative;
}

a:after {
  content: "";
  position: absolute;
  background-image: linear-gradient(to bottom, #ccb58d, #ccb58d 35%, transparent 35%, transparent 65%, #ccb58d 65%);
  width: 2px;
  right: -2px;
  top: -2px;
  height: calc(100% + 4px);
}

<div>
  <a>view profile</a>
</div>

来源：https://stackoverflow.com/questions/46715287/cut-out-a-piece-of-a-border-on-button-with-transparent-background

标签

html

css