How to draw cross background via css which is responsive

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

@TemaniAfif, Please the solution you gave, didn't worked me. Please remove it from duplicate and help me — , Jul 02 '18 at 07:48
are you sure? and you checked all the related links of the rifght side? you did more search on google? ... you are supposed to try something on your own then get back with your code where you hade issue. And the link I gave you is a good start to have something. If you also search using "slanted background div" you will get more and more codes. — Temani Afif, Jul 02 '18 at 08:05
here is another duplicate : https://stackoverflow.com/questions/25958315/use-linear-gradient-in-css-to-split-div-in-2-colors-but-not-in-equal-halves/25958412 — Temani Afif, Jul 02 '18 at 08:14
and another one : https://stackoverflow.com/questions/27714340/two-gradients-with-two-distinct-sections-with-just-one-div-element — Temani Afif, Jul 02 '18 at 08:15
Yes i am sure I tried it i was not able to achieve as i want — , Jul 02 '18 at 08:16
another one : https://stackoverflow.com/questions/47124112/diagonal-side-div-color-css-js — Temani Afif, Jul 02 '18 at 08:17
and simply following those links and reading the doc of gradient https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient you can easily write one line of code : https://jsfiddle.net/4t2c1gb0/1/ — Temani Afif, Jul 02 '18 at 08:20
@TemaniAfif Please check my updated question, Please remove it from duplicate — , Jul 02 '18 at 08:24
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/174146/discussion-between-nimesh-deo-and-temani-afif). — , Jul 02 '18 at 08:29
You have to understand that we don't do "free-coding" on this site .. I helped you by giving you helpful links that allow you to start now you need to help your self by trying to code it ... then if you still have issue, show us your code and we can help ... no one will help you by simply adding a screenshot — Temani Afif, Jul 02 '18 at 08:29
I have tried making simple background using you links and code, i am trying to make two movement in bg first down to 45 degree till next 200px and then again back to 180 degree till end — , Jul 02 '18 at 08:33
so share this :) we need to see this, we need your code to help you — Temani Afif, Jul 02 '18 at 08:36

Temani Afif · Accepted Answer · 2018-07-02T09:37:31.957

2

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>

edited Jul 02 '18 at 09:37

answered Jul 02 '18 at 09:25

Temani Afif

245,468
26
309
415

1

I got your point, i am confused how is the mechanism, i need to learn this – Jul 02 '18 at 09:31
@NimeshDeo check the last code and you will see each gradient alone, then simply adjust different values to understand how they works ;) – Temani Afif Jul 02 '18 at 09:31
Can you please help me draw shape like this in a single div. https://imgur.com/bGF9gJH – Jul 02 '18 at 22:01
@NimeshDeo you don't want to make it a question? you want the code directly? – Temani Afif Jul 02 '18 at 23:05
sure, i will create it one second – Jul 02 '18 at 23:07
@NimeshDeo try to make it with code and clear ;) so you can also get other replies with other techniques – Temani Afif Jul 02 '18 at 23:10
here is the new thread https://stackoverflow.com/questions/51144978/draw-cross-background-up-down-via-css-which-is-responsive – Jul 02 '18 at 23:52

How to draw cross background via css which is responsive

1 Answers1

Linked