如何使倾斜不影响渐变css答案

【问题标题】：How to make skew not affect gradient css如何使倾斜不影响渐变css
【发布时间】：2021-06-06 15:37:17
【问题描述】：

我正在尝试对倾斜的 div 应用渐变，但渐变从倾斜开始的位置开始，并且无论我使用什么角度，它都不会应用我正在寻找的渐变。

这是我要复制的渐变

但我得到了一个非常不同的结果......颜色已关闭，并且在我的右侧太绿了。您可以注意到在上图中，渐变从底部的小楔形开始，但我的渐变从整个底部开始。

    .main {
      height: 80vh;
      background-color: white;
    }
    
    .skew-div {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);;
      transform: skewY(-12deg);
      transform-origin: 0;
    }

    <div class="main">
      <div class="skew-div">
      </div>
    </div>

如果不将图像作为背景，这可能吗？

【问题讨论】：

标签： html css gradient

【解决方案1】：

使用剪辑路径

.main {
  height: 80vh;
  background-color: white;
  position:relative;
}

.skew-div {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}

<div class="main">
  <div class="skew-div">
  </div>
</div>

【讨论】：

【解决方案2】：

你可以使用clip-path属性

.main {
  height: 80vh;
  background-color: white;
}

.skew-div {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);
  ;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
}

<div class="main">
  <div class="skew-div">
  </div>
</div>

【讨论】：

【解决方案3】：

您可以使用clip-path 属性，而不是使用transform: skewY()。 transform 有时会突然产生一些令人困惑的问题。这就是为什么您有时应该使用该属性来逃避。否则使用正确的Browser Vendor Prefixes。

如果您在配置 clip-path 属性时遇到任何困难，那么您可以使用此第 3 方网站生成剪辑路径值 => https://bennettfeely.com/clippy/

【讨论】：