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

Question

I have a requirement to have a button which should display two colors on it. I was able to achieve mix up the colors to a certain level using gradient property but not able to produce the exact one. I want the gradient color set inside a button have curved and rounded edges.Below is my code,

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]

Using the below code in was able to achieve the below one,

But my actual requirement is to have the edges of the gradient color(blue) to be rounded rather than have sharp steep edges. So the requirement it would look similar like the below, enter image description here

As in the image i want the edges to be curved and rounded.Can this be achieved using the Gradient properties.Thanks in advance

Answer 1

Doable with multiple background layer:

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