在透明背景的按钮上剪出一块边框

您好，我想弄清楚如何创建以下按钮

制作按钮很容易，但棘手的部分是在右侧创建小切口。该按钮具有透明背景，因此我无法将带有背景颜色的伪元素粘贴在那里以与其重叠。

有任何想法吗？

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

这是一个 jsfiddle，其中包含可供使用的按钮的重新创建

https://jsfiddle.net/0ypp6m9c/ https://jsfiddle.net/0ypp6m9c/

Thanks

您可以使用 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;
    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>

关键属性是：

• background-image：垂直线性渐变设置为背景图像。第二个参数设置边框段的颜色和高度。
• background-repeat：背景垂直重复，因此有两段
• background-position：这里我们将背景放在右边并垂直移动它以将透明空间定位在中间
• background-size：水平尺寸让我们设置边框的宽度，垂直尺寸设置重复图像的尺寸。将其与线性梯度函数的第二个参数相结合，我们可以改变分段的大小。