使用具有弯曲圆边的渐变属性在按钮的一半上设置背景颜色

Question

我需要一个按钮，它应该显示两种颜色。我能够使用渐变属性将颜色混合到一定程度，但无法生成准确的颜色。我希望按钮内设置的渐变颜色弯曲且圆润edges.Below 是我的代码，

HTML

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

CSS

.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;
}[enter image description here][1]

使用下面的代码可以实现下面的，

但我的实际要求是让渐变颜色（蓝色）的边缘变圆而不是锐利陡峭的边缘。所以它看起来像下面的要求， enter image description here

如图所示，我希望边缘是弯曲的，rounded.Can这可以通过提前使用渐变properties.Thanks来实现

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>

使用具有弯曲圆边的渐变 属性 在按钮的一半上设置背景颜色

Have a background color set up on half of a button using gradient property with curved rounded edges

html

css

gradient

使用具有弯曲圆边的渐变属性在按钮的一半上设置背景颜色