How to draw cross background via css which is resp

Question

How to draw such an shape via css in a single section(div)?

currently i have used two div check my code

The idea is simple, from horizantally middle the black color first need to go down at 45 degree till next 100px and then it should go at 180 degree for remaining part. All this needs to be done for a single container/section/div.

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

Please guide me to achieve such background in single div via css

Answer 1

You can try something like this:

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

For a better visualization, change the colors of gradient to see the different shapes:

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