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 first need to go down at 45 degree till next 100px and then it should go at 180 degree for remaining part.

For bottom, from horizontally middle the orange 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%, #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>

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

来源：https://stackoverflow.com/questions/51144978/draw-cross-background-up-down-via-css-which-is-responsive

标签

html

css

css3

linear-gradients