在div上创建倾斜渐变（顶部和底部）

Question

我正在尝试将div应用于看起来像这样的div：

我设法弄清楚了如何在顶部倾斜，但是不确定如何在底部倾斜。

当前方法：

.gradient{
    background: linear-gradient(188deg, #FFFFFF 24%, transparent 24%), linear-gradient(90deg, #454545 0%, #454545 100%);
}

.gap{
  height: 600px;
}

<div class="gradient">
  <div class="gap"></div>
</div>

我试图翻转渐变，即

.gradient{
    background: linear-gradient(185deg, #FFFFFF 24%, transparent 24%), linear-gradient(90deg, #454545 0%, #454545 100%);
  background: linear-gradient(185deg, transparent 24%, #FFF 24%), linear-gradient(90deg, #454545 100%, #454545 0%);
}

但是它没有用，而且我认为这不是解决此问题的正确方法（就像创建另一个线性渐变一样）。

Answer 1

选项1

HTML-

<div class="container">
</div>

CSS-

.container{
  width: 150px;
  height: 100px;
  transform: skewY(20deg);
  background: #454545;
}

选项2（推荐）-

HTML-

<div class="container">
</div>

CSS-

.container{
  width: 150px;
  height: 100px;
  clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 75%);
  background: #454545;
}

两个结果均为-

Answer 2

您可以使用剪切路径来实现这一目标。

类似这样的东西

剪切路径：多边形（0 0，100％22％，100％99％，0 74％）;

这是一个可以帮助您找到正确路径的网站：https://bennettfeely.com/clippy/

Answer 3

将您的形状分为3部分。两个三角形和一个矩形：

.box {
 width:300px;
 height:300px;
 background:                                             /*Position /width height*/
  linear-gradient(to top right,grey 50%,transparent 50.5%)   top    /100%  30%,
  linear-gradient(grey,grey)                                 center /100%  40%,
  linear-gradient(to bottom left,grey 50%,transparent 50.5%) bottom /100%  30%;
 background-repeat:no-repeat;
}

<div class="box">
</div>

这里有不同的颜色，可以更好地看到拼图

.box {
 width:300px;
 height:300px;
 background:                                             /*Position /width height*/
  linear-gradient(to top right,red 50%,transparent 50.5%)   top    /100%  30%,
  linear-gradient(blue,blue)                                 center /100%  40%,
  linear-gradient(to bottom left,green 50%,transparent 50.5%) bottom /100%  30%;
 background-repeat:no-repeat;
}

<div class="box">
</div>