Нарисуйте крест вверх / вниз через CSS, который реагирует

Question

Как нарисовать такую ​​форму с помощью CSS в одном разделе (div)?

В настоящее время я использовал три div, проверь мой код:)

Идея проста: сверху, от горизонтальной середины, оранжевый цвет сначала должен опускаться на 45 градусов до следующих 100 пикселей, а затем он должен идти на 180 градусов для оставшейся части.

В нижней части, от середины по горизонтали оранжевый цвет сначала должен опускаться на 45 градусов до следующих 100 пикселей, а затем он должен идти на 180 градусов для оставшейся части.

Все это нужно сделать для одного контейнера / секции / подразделения.

.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), вы получите 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>

Тогда просто используйте столько градиентов, сколько хотите. У вас будет несколько фоновых слоев, и, определив один и тот же цвет, вы получите необходимую форму.