通过响应式 css 绘制交叉背景 up/down

Question

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

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

思路很简单，对于顶部，橙色从水平中间开始先下降45度，直到下一个100px，然后剩下的部分应该下降180度。

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

所有这些都需要为单个 container/section/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

与类似，您需要添加顶部并调整几个值：

.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) 你就有了你想要的 45deg。

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

.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>

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

通过响应式 css 绘制交叉背景 up/down

Draw cross background up/down via css which is responsive

html

css

linear-gradients