Draw Cross Background Up/down Via Css Which Is Responsive

How to draw such an shape via css in a single section(div)? currently i have used three div check my code :) The idea is simple, for top, from horizontally middle the orange color

Solution 1:

Similary to my previous answer, you need to add the top part and adjust few values:

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

There is two kind of gradient used here. One to create a triangle shape:

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

The trick is to use a diagonal direction (to bottom left for example) and you make 50% of the color and 50% transparent. Then by making it a square (100px 100px) you have the 45deg you want.

The other gradient is easier. It's a simple rectangle where there is no need to define direction or color stop. We only need to define the size and position:

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

Then simply use as many gradients as you want. You will have multiple background layers and by defining the same color you obtain the needed shape.