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

【问题标题】：Creating slant gradient on div (both top and bottom)在 div 上创建倾斜渐变（顶部和底部）
【发布时间】：2019-10-01 07:07:36
【问题描述】：

我正在尝试将渐变应用到应该如下所示的 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%);
}

但它不起作用，我认为这不是解决这个问题的正确方法（如创建另一个线性渐变）。

【问题讨论】：

为间隙提供背景颜色并使用最适合您的 css 的变换属性、旋转或倾斜

标签： html css linear-gradients

【解决方案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;
}

两个结果到 -

【讨论】：

【解决方案2】：

您可以使用剪辑路径来实现这一点。

类似的东西

剪辑路径：多边形（0 0, 100% 22%, 100% 99%, 0 74%）；

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

【讨论】：

【解决方案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>

【讨论】：