首先,我在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>