'smoothly combining vertical and diagonal linear radients css3

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

csslinear-gradients


Solution 1:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions