我有一个不寻常的问题，关于使用一个样式向SVG和HTML形状添加渐变。我的问题是，如果我创建一个SVG形状和一个div形状，我分别添加一个渐变，那么我们可以看到这两个形状。然而，我希望查看者将其视为一个形状，即使我们知道它是两个形状。
那么，让我们直接进入我的问题。我想用SVG路径形状创建一个wave，我使用的是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>

See The Error
正如你所看到的，我们可以看到两个不同的渐变，但我需要一个渐变的两个形状。我已经尝试了ChatGPT，YouTube，和更多，但我找不到解决这个问题的方法。