如何通过响应式css绘制交叉背景

Question

如何通过 css 在单个部分（div）中绘制这样的形状？

目前我使用了两个 div 检查我的代码

这个想法很简单，从水平中间，黑色首先需要下降 45 度直到下一个 100 像素，然后它应该下降 180 度，剩下的部分。所有这些都需要为单个容器/部分/div 完成。

.grad {
  height:100px;
  width:100%;
  background:linear-gradient(45deg, white 50%, black 0),
  linear-gradient(blue 20%, black 0);
}

.grad1 {
  height:100px;
  width:100%;
  background:linear-gradient(-130deg, orange 0%, black 0),
  linear-gradient(blue 20%, black 0);
}

<div class="grad1">

</div>
<div class="grad">

</div>

请指导我通过css在单个div中实现这样的背景

Answer 1

你可以试试这样的：

.header {
  height:200px;
  background:
    /*Top part*/
    linear-gradient(#000,#000) top/100% 50%,
    /*Bottom part*/
    linear-gradient(to top right,transparent 49%,#000 50.5%) bottom center/100px 50%,
    linear-gradient(#000,#000) bottom right/calc(50% - 50px) 50%;
   background-repeat:no-repeat;
}

<div class="header">

</div>

为了更好的可视化，改变渐变的颜色来查看不同的形状：

.header {
  height:200px;
  background:
    /*Top part*/
   linear-gradient(blue,blue) top/100% 50%, /* Fill 100% width and 50% height at the top*/
   /*Bottom part*/
   linear-gradient(to top right,transparent 49%,red 50.5%) bottom center/100px 50%, /*Create a triangle inside a square to have the 45deg at the bottom center*/
   linear-gradient(green,green) bottom right/calc(50% - 50px) 50%; /*Fill half the width minus half the width of the square at the bottom right*/
   background-repeat:no-repeat;
}

<div class="header">

</div>