具有渐变属性的按钮在渐变颜色上具有弯曲的圆角边缘

Question

我需要一个按钮，它应该显示两种颜色。 我能够使用渐变属性将颜色混合到一定程度，但无法产生确切的颜色。 我希望按钮内设置的渐变颜色具有弯曲和圆形边缘。

下面是我的代码：

 .triangle{ padding:20px; border:none; --g:red 135deg,yellow 0; /* the coloration */ --p:30%;/* the position */ background: conic-gradient(from -180deg at 50% var(--p) ,var(--g)) top, conic-gradient(from -135deg at 50% calc(100% - var(--p)),var(--g)) bottom; background-size:100% 51%; background-repeat:no-repeat; }

 <button class='triangle'> Linear Check </button>

使用下面的代码能够实现以下输出：

但我的实际要求是让渐变颜色（蓝色）的边缘变圆而不是陡峭的边缘。 因此，它的要求类似于以下内容：

就像在图像中一样，我希望边缘弯曲和变圆。这可以使用渐变属性来实现。 无论如何，是否可以使用线性渐变属性或径向渐变来实现这一点，而不是使用圆锥形渐变。谢谢

Answer 1

通过使用伪元素，您可以使用这些样式来实现您提到的内容：

 .triangle{ padding:20px; border:none; background-color: yellow; position: relative; overflow: hidden; } .triangle::after { content: ""; background-color: red; position: absolute; top: 10%; left: -10%; width: 25%; height: 80%; border-radius: 10px; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>btn gradient</title> <link rel="stylesheet" href="style1.css"> </head> <body> <button class='triangle'> Linear Check </button> </body> </html>

如果需要，您可以更改这些值。

Answer 2

我认为解决它的最简单方法是使用 div 而不是按钮。 所以：

用 div 替换按钮元素

 <div class="triangle">Click me</div>

2. 调整 div 的 CSS 规则以符合您的需要 + 为 div 添加按钮感觉

 .triangle{ /* your CSS rules from your question... */ /* Give the button the wanted radius here */ border-radius: 15px; } /* Give the div button effect when hover*/ .triangle:hover { box-shadow: 0px 5px 15px -5px; transform: scale(1.03); } /* Give the div button effect when click */ .triangle:active { box-shadow: 0px 4px 4px; transform scale(.98); }

Answer 3

可以使用多个背景层：

 .triangle{ --d:10px; /* distance from top */ --r:10px; /* radius of circle */ --c:red; padding:20px; border:none; background: linear-gradient(var(--c) 0 0) left/calc(50% + var(--r)) calc(100% - 2*var(--d) - 2*var(--r)), linear-gradient(var(--c) 0 0) left/50% calc(100% - 2*var(--d)), radial-gradient(farthest-side,var(--c) 98%,#0000 ) left 50% top var(--d)/calc(var(--r)*2) calc(var(--r)*2), radial-gradient(farthest-side,var(--c) 98%,#0000 ) left 50% bottom var(--d)/calc(var(--r)*2) calc(var(--r)*2), yellow; background-repeat:no-repeat; }

 <button class='triangle'> Linear Check </button> <button class='triangle' style="--d:5px"> Linear Check </button> <button class='triangle' style="--d:5px;--r:20px"> Linear Check </button>

具有渐变属性的按钮在渐变颜色上具有弯曲的圆角边缘

问题描述

3 个解决方案

解决方案1
0 2021-11-08 17:17:58

解决方案2
0 2021-11-08 19:05:26

解决方案3
0 2021-11-08 23:22:58

具有渐变属性的按钮在渐变颜色上具有弯曲的圆角边缘

问题描述

3 个解决方案

解决方案1 0 2021-11-08 17:17:58

解决方案2 0 2021-11-08 19:05:26

解决方案3 0 2021-11-08 23:22:58

解决方案1
0 2021-11-08 17:17:58

解决方案2
0 2021-11-08 19:05:26

解决方案3
0 2021-11-08 23:22:58