通过响应式css向上/向下绘制交叉背景

Question

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

目前我使用了三个 div 检查我的代码:)

这个想法很简单，对于顶部，从水平中间橙色首先需要向下 45 度直到下一个 100 像素，然后它应该在 180 度的剩余部分。

对于底部，从水平中间，橙色首先需要下降 45 度直到下一个 100 像素，然后它应该下降 180 度以用于剩余部分。

所有这些都需要为单个容器/部分/div 完成。

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

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

<div class="grad2">

</div>

<div class="grad1">

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

</div>

Answer 1

类似于my previous answer，需要添加顶部并调整几个值：

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

<div class="header">

</div>

这里使用了两种渐变。一个创建三角形：

.box {
  height:200px;
  background:
  linear-gradient(to bottom left,transparent 49%,orange 50.5%) 
  top center/ /*place it at top center*/
  100px 100px  /*width:100px height:100px*/
  no-repeat;
  border:1px solid;
}

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

诀窍是使用对角线方向（例如to bottom left），使 50% 的颜色和 50% 的透明。然后把它变成一个正方形 (100px 100px)，你就有了你想要的 45 度。

另一个渐变更容易。这是一个简单的矩形，不需要定义方向或色标。我们只需要定义大小和位置：

.box {
  height:200px;
  background:
  linear-gradient(orange,orange)  /*define the color*/
  center/ /*place it at the center*/
  100% calc(100% - 50px) /*width:100% height:(100% - 50px)*/
  no-repeat;
  border:1px solid;
}

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

然后只需使用任意数量的渐变即可。您将拥有多个背景层，并通过定义相同的颜色获得所需的形状。