CSS-具有渐变边框的透明圆形按钮

首先,我在SO中搜索了类似的问题,有很多但没有一个具有下面的确切要求.

我正在尝试使用纯CSS创建下面的按钮.

它具有以下要求.

>它的边界为1px,带有水平渐变.
>必须透明.
>必须有圆角
>它将具有透明的边框切口.
>宽度和高度必须可变
>它应可在所有现代浏览器(不是IE)中使用

我创建了一个Code SandBox,除了border-radius以外,所有其他功能都正确无误.我使用了多边形剪切路径进行剪切,并使用了border-image进行了渐变,这就是为什么border-radius不起作用的原因.

body {
  font-family: sans-serif;
  background-color: #232837;
}

.button {
  cursor: pointer;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  color: white;
  
  background-color: transparent;

  border: solid 1px;
  border-radius: 6px;
  border-image: linear-gradient(to left,#743ad5 0%,#d53a9d 100%);
  border-image-slice: 1;

  clip-path: polygon(0 0,12px 0,12px 1px,24px 1px,24px 0,100% 0,100% 100%,0 100%);

}

 <div style="padding:40px;">
			<a class="button">This is a button</a>
		</div>

https://codesandbox.io/s/kw9p9k5073

到目前为止,我设法避免使用svgs,因为我不太了解它们,无法正确实施解决方案,但是如果我必须走那条路,我会避免的.

任何建议将不胜感激.

最佳答案

考虑到您将拥有一个具有1px边框的水平渐变这一事实,我们可以通过创建多个背景图层来模拟此效果.左右边框可以视为纯色(因为它是水平渐变),只有顶部/底部才需要真正是渐变.

棘手的部分是找到顶部渐变的百分比值,以使透明间隙保持与底部相同.为此,我使用了一些数学运算来找到正确的值.

我将边框设为2px以更好地查看结果

body {
  font-family: sans-serif;
  background-color: #232837;
}

.button {
  cursor: pointer;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  color: white;
  border:2px solid transparent;
  border-radius:10px;
  border-right-color:#743ad5;
  border-left-color:#d53a9d;
  background:
    linear-gradient(to left,rgb(116,58,213) 0%,rgb(186,143) 70%,transparent 70%,transparent 85%,rgb(201,128) 85%,rgb(213,157) 100%) top/100% 2px,linear-gradient(to left,#d53a9d 100%) bottom/100% 2px;
  background-repeat:no-repeat;
}

<a class="button">This is a button</a>
<a class="button">This is a long button</a>
<a class="button" style="padding:10px">This is a very long button</a>

CSS-具有渐变边框的透明圆形按钮

相关文章