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/100px100px,
    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/100px100px,
    linear-gradient(orange,orange) bottom right/calc(50% - 49px) 100px;
   background-repeat:no-repeat;
}

<divclass="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*/100px100px/*width:100px height:100px*/
  no-repeat;
  border:1px solid;
}

<divclass="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;
}

<divclass="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.