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

Question

如何通过css在单节(div)中绘制这样的形状？

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

思路很简单，从水平中间开始，黑色先向下45度，直到下一个100px，然后剩下的部分应该向下180度。所有这些都需要为单个 container/section/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>

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

How to draw cross background via css which is responsive

css

background

linear-gradients