Draw cross background up/down via css which is responsive

Question

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>

@Varuna can you please show me an example – Jul 03 '18 at 00:06 — , Jul 03 '18 at 00:06

Temani Afif · Accepted Answer · 2018-07-03T00:08:35.683

2

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.

edited Jul 03 '18 at 00:08

answered Jul 02 '18 at 23:54

Temani Afif

245,468
26
309
415

You are really an expert, Thanks a lot, Please guide me to have a good concept on it. Please clear it to understandable – Jul 02 '18 at 23:56
@NimeshDeo I added more details ;) – Temani Afif Jul 03 '18 at 00:02
Can we add black color instead of transparent at top? and grey color at bottom in transparent region? :) – Jul 03 '18 at 00:10
@NimeshDeo yes of course, simply add more gradient ;) https://jsfiddle.net/1q0nrzsh/4/ – Temani Afif Jul 03 '18 at 00:12
can you please give me a guide or tutorial to understand the linear gradient to create anything i want? :) – Jul 03 '18 at 05:54
@NimeshDeo I have no guide to give unfortunately ... the only thing I can give you is the documentation : https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient then it's a matter of experience and get used with it ... As you can see the trick is to be able to find how you can split the whole shape to different small and trivial ones and there isn't one way, Each one can see it differently ... by the way you can search my profile and you will find many question/answer dealing with gradient and you may have more ideas/tricks about how to use them – Temani Afif Jul 03 '18 at 07:41
In that case please help me with this background as well. https://imgur.com/TC0qybV :) I will learn each time you will post answer – Jul 03 '18 at 09:20
@NimeshDeo you want transparency or black color? also the enveloppe is included in the background? – Temani Afif Jul 03 '18 at 09:27
I want Black color at top and on left side at bottom i want transparent. Ignore envelope :) ;) – Jul 03 '18 at 10:09
@NimeshDeo ok here is your background ;) https://jsfiddle.net/ohu18xjc/12/ – Temani Afif Jul 03 '18 at 10:30
Can you please help me with this one https://imgur.com/Ae1hTsi :) without envelope – Jul 03 '18 at 17:54
@NimeshDeo this one should be easy ;) you need to practise :) https://jsfiddle.net/3aqtg6vs/3/ – Temani Afif Jul 03 '18 at 19:31
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/174322/discussion-between-nimesh-deo-and-temani-afif). – Jul 04 '18 at 06:37
@TemamiAfif i want to create bg like this imgur.com/a/rBS6qLV , i tried but i didn't found way to make it responsive it looks fine at bigger screen but not at small size(angle at top). codepen.io/anon/pen/vrMrzK – Jul 04 '18 at 08:09
@NimeshDeo as you can see in my code, the triangle shape need to be used with fixed width/height actually you used % which is not good – Temani Afif Jul 04 '18 at 08:20
Can you show me by editing the pen and share link here for perfect responsive nature :) Thanks – Jul 04 '18 at 08:23

Draw cross background up/down via css which is responsive

1 Answers1

Linked