如何使用一种样式为 SVG 和 HTML 形状添加渐变 - 波形渐变

Question

关于使用一种样式向 SVG 和 HTML 形状添加渐变，我有一个不寻常的问题。我的问题是，如果我创建一个 SVG 形状和一个 div 形状，并分别添加渐变，那么我们可以看到这两个形状。但是，我希望观众将其视为一个形状，即使我们知道它是两个形状。

那么，让我们直接进入我的问题。我想使用 SVG 路径形状创建波浪，并且我正在使用 HTML 和 CSS（如果我们需要 JavaScript，那没问题）。由于内容的原因，div 容器采用随机高度。所以，在我把那个波浪放在那个容器（容器形状）的底部之后，如果我放一种颜色，就没有问题了，对吧？但是当我放一个渐变时，我们可以看到这是两个形状，UI 看起来很糟糕。渐变是从左到右开始的，所以div容器的渐变也是从左到右的，都是渐变，只是位置不同。所以，我们可以看到这是两个形状。我不想创建一个 SVG 路径，因为不同的文章具有不同的高度。最后，我希望我的容器（div 形状）和波浪 SVG 路径形状采用一种样式渐变。就是这样。

这里是这个问题的简单代码：

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
article {
    background: linear-gradient(
    45deg,
    rgb(109, 162, 248),
    rgb(52, 82, 250)
    );
    margin: 0;
    padding: 1rem 2rem;
    color: white;
    position: relative;
}
h1 {
    text-align: center;
}
#arrow {
    position: absolute;
    bottom: 0;
    right: 5%;
    transform: rotate(180deg);
}

<article>
<h1>Intestaller Movie Review</h1>
<p>
    "Intestaller" is a science fiction film directed by Christopher Nolan.
    The film stars Matthew McConaughey as Cooper, a former NASA pilot who is
    tasked with leading a team of scientists on a mission to find a new home
    for humanity. The movie is set in a dystopian future where Earth's
    resources are rapidly depleting, and mankind's survival is at stake.
</p>

<p>
    The plot of the movie is complex and thought-provoking, exploring themes
    such as time travel, black holes, and the nature of human existence. The
    film's visual effects are stunning, with breathtaking scenes of space
    travel and the cosmic wonders of the universe. The acting performances
    are also top-notch, with McConaughey delivering a powerful and emotional
    performance as the film's protagonist.
</p>

<p>
    While the movie's plot can be challenging to follow at times, it is
    ultimately a rewarding and satisfying viewing experience. "Intestaller"
    is a film that encourages viewers to contemplate the big questions about
    our place in the universe and the choices we make as a species. Overall,
    it is a must-see for any science fiction fan or anyone interested in
    exploring the mysteries of the cosmos.
</p>

<p>
    In conclusion, "Intestaller" is a visually stunning and intellectually
    stimulating film that will leave you with plenty to ponder long after
    the credits roll.
</p>
<svg
    id="arrow"
    width="100px"
    height="100px"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
>
    <g id="Arrow / Arrow_Up_LG">
    <path
        id="Vector"
        d="M12 3L7 8M12 3L17 8M12 3V21"
        stroke="red"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
    />
    </g>
</svg>
</article>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<defs>
    <linearGradient id="grad_1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop
        offset="0%"
        style="stop-color: rgb(109, 162, 248); stop-opacity: 1"
    />
    <stop
        offset="100%"
        style="stop-color: rgb(52, 82, 250); stop-opacity: 1"
    />
    </linearGradient>
</defs>
<path
    fill="url(#grad_1)"
    fill-opacity="1"
    d="M0,160L48,170.7C96,181,192,203,288,197.3C384,192,480,160,576,128C672,96,768,64,864,85.3C960,107,1056,181,1152,202.7C1248,224,1344,192,1392,176L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
></path>
</svg>

如您所见，我们可以看到两种不同的渐变，但两种形状都需要一种渐变。我试过 ChatGPT、YouTube 等等，但我找不到解决这个问题的方法。

Answer 1

尝试这样做：
1 - 删除您的 SVG 蓝色波浪。
2 - 将白色波浪放在蓝色 DIV 框内。

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
article {
    
    margin: 0;
    padding: 1rem 2rem;
    color: white;
    position: relative;
}
h1 {
    text-align: center;
}
.gradient-box {
background: linear-gradient(
    45deg,
    rgb(109, 162, 248),
    rgb(52, 82, 250)
    );
}
#arrow {
    position: absolute;
    bottom: 0;
    right: 5%;
    transform: rotate(180deg);
}

<div class="gradient-box">
<article>
<h1>Intestaller Movie Review</h1>
<p>
    "Intestaller" is a science fiction film directed by Christopher Nolan.
    The film stars Matthew McConaughey as Cooper, a former NASA pilot who is
    tasked with leading a team of scientists on a mission to find a new home
    for humanity. The movie is set in a dystopian future where Earth's
    resources are rapidly depleting, and mankind's survival is at stake.
</p>

<p>
    The plot of the movie is complex and thought-provoking, exploring themes
    such as time travel, black holes, and the nature of human existence. The
    film's visual effects are stunning, with breathtaking scenes of space
    travel and the cosmic wonders of the universe. The acting performances
    are also top-notch, with McConaughey delivering a powerful and emotional
    performance as the film's protagonist.
</p>

<p>
    While the movie's plot can be challenging to follow at times, it is
    ultimately a rewarding and satisfying viewing experience. "Intestaller"
    is a film that encourages viewers to contemplate the big questions about
    our place in the universe and the choices we make as a species. Overall,
    it is a must-see for any science fiction fan or anyone interested in
    exploring the mysteries of the cosmos.
</p>

<p>
    In conclusion, "Intestaller" is a visually stunning and intellectually
    stimulating film that will leave you with plenty to ponder long after
    the credits roll.
</p>

</article>
<svg xmlns="http://www.w3.org/2000/svg"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1440 248.3" style="enable-background:new 0 0 1440 248.3;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M0,88.3L48,99c48,10.3,144,32.3,240,26.6c96-5.3,192-37.3,288-69.3s192-64,288-42.7c96,21.7,192,95.7,288,117.4
    c96,21.3,192-10.7,240-26.7l48-16v160h-48c-48,0-144,0-240,0s-192,0-288,0s-192,0-288,0s-192,0-288,0s-192,0-240,0H0V88.3z"/>
</svg>
</div>