Как нарисовать крест фон с помощью CSS, который реагирует

Question

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

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

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

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

Пожалуйста, помогите мне достичь такого фона в одном div с помощью CSS

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>