smoothly combining vertical and diagonal linear radients css3

Question

I'm trying to make a pipe appearance using gradients. Though the corners doesn't blend well.

How can I make the corner blend smoothly? (Already tried radial, and multipal gradients but it didn't work) Code here, And below:

body {
    margin:0;
}
div {
    height:100%;
    width: 100%;
}
#container{
    display: grid;
    height:100vmin;
    width: 100vmin;
    grid-template-rows: repeat(9, 1fr);
    grid-template-columns: repeat(9, 1fr);
    background: black;
}
.corner1-1{
    border-radius: 0 0 50% 0; 
    background-image: linear-gradient(to bottom right, green, yellow); 
}
.direction01{
    background-image: linear-gradient(to right, green, yellow);
}
.direction10{
    background-image: linear-gradient(to bottom, green, yellow);
}

<div id="container">
  <div class="direction01" style="grid-row: 7; grid-column:7"></div>
  <div class="direction01" style="grid-row: 8; grid-column:7"></div>
  <div class="corner1-1" style="grid-row: 9; grid-column:7"></div>
  <div class="direction10" style="grid-row: 9; grid-column:6"></div>
</div>

Result image and notes

Answer 1

Solved! I should have divided the diagonal by root 2 to make it fit to 1 unit size, and use radial gradient instead of linear.

background-image: radial-gradient(ellipse at top left, green, yellow 70.7%);

70.7 is 1/root(2)

Here is full code:

body {
    margin:0;
}
div {
    height:100%;
    width: 100%;
}
#container{
    display: grid;
    height:100vmin;
    width: 100vmin;
    grid-template-rows: repeat(9, 1fr);
    grid-template-columns: repeat(9, 1fr);
    background: black;
}
.corner1-1{
    border-radius: 0 0 50% 0; 
    background-image: radial-gradient(ellipse at top left, green, yellow 70.7%); 
}
.direction01{
    background-image: linear-gradient(to right, green, yellow);
}
.direction10{
    background-image: linear-gradient(to bottom, green, yellow);
}

<div id="container">
  <div class="direction01" style="grid-row: 7; grid-column:7"></div>
  <div class="direction01" style="grid-row: 8; grid-column:7"></div>
  <div class="corner1-1" style="grid-row: 9; grid-column:7"></div>
  <div class="direction10" style="grid-row: 9; grid-column:6"></div>
</div>