在网页背景中应用三角形形式的渐变

Question

我正在尝试准备一个网站，但收到一个错误，即背景渐变未应用于自定义形状。我阅读了此处提供的所有问题，但没有一个解决了问题。

我尝试了不同的方法，其中之一如下所述....请帮助我学习这个过程

<div class="custom-shape-divider-bottom-1728146501">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M1200 0L0 0 598.97 114.72 1200 0z" class="shape-fill">
        </path>
        <style type="text/css">
        rect{fill:url(#MyGradient)}
      </style>
      <defs>
        <linearGradient id="MyGradient">
          <stop offset="5%" stop-color="#ffd194" />
          <stop offset="95%" stop-color="#70e1f5" />
        </linearGradient>
      </defs>
    </svg>
</div>

In css
rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}
.custom-shape-divider-bottom-1728146501 {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1728146501 svg {
    position: relative;
    display: block;
    width: calc(134% + 1.3px);
    height: 150px;
}

Answer 1

您正在将渐变应用于

rect

元素，但 HTML 中没有

rect

。我假设您正在尝试将其应用到

path

，如下所示：

path {
  cursor: pointer;
  shape-rendering: crispEdges;
  fill: url(#MyGradient);
}

.custom-shape-divider-bottom-1728146501 {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1728146501 svg {
  position: relative;
  display: block;
  width: calc(134% + 1.3px);
  height: 150px;
}

<div class="custom-shape-divider-bottom-1728146501">
  <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
    <path d="M1200 0L0 0 598.97 114.72 1200 0z" class="shape-fill"></path>
    <defs>
      <linearGradient id="MyGradient">
        <stop offset="5%" stop-color="#ffd194" />
        <stop offset="95%" stop-color="#70e1f5" />
      </linearGradient>
    </defs>
  </svg>
</div>