通过css绘制跨背景上/下响应

Question

如何在单个区域（div）中通过CSS绘制这样的形状？

当前我已经使用了三个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

Similary到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>

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