剪出带有透明背景的按钮上的边框 [英] 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.

有什么想法吗?

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，带有可重新玩的按钮

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

https://jsfiddle.net/0ypp6m9c/

谢谢

推荐答案

您可以使用CSS渐变来实现:

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>

关键属性是:

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

• 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.

这篇关于剪出带有透明背景的按钮上的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！