平滑地结合垂直和对角线线性辐射 css3

Question

我正在尝试使用渐变制作管道外观。虽然角落没有很好地融合。

怎样才能使拐角平滑融合？（已经尝试过径向和多重渐变，但没有用） Code here, 及以下：

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

已解决！我应该将对角线除以根号 2 以使其适合 1 个单位大小，并使用径向渐变而不是线性渐变。

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

70.7 是 1/root(2)

完整代码如下：

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>

平滑地结合垂直和对角线线性辐射 css3

smoothly combining vertical and diagonal linear radients css3

css

linear-gradients