CSS only 2 striped background (skewed)

Question

Been digging into a way to make a two striped background with CSS only. Trying to accomplish this:

You can do it using angled linear gradients (like the second snippet in **question** here (angle needs to be changed) - http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive). I am sure this is a dupe but not able to find the perfect one. — Harry, Mar 23 '16 at 13:49

Nenad Vracar · Accepted Answer · 2016-03-23T14:35:39.820

6

You can do this with linear-gradient

body, html {
  margin: 0;
  padding: 0;
}

div {
  min-height: 100vh;
  background: linear-gradient(65deg, white 50%, #5C8F09 50%);
}

<div></div>

edited Mar 23 '16 at 14:35

answered Mar 23 '16 at 13:49

Nenad Vracar

118,580
15
151
176

Perfect! Thanks, I'll accept as soon as it let's me. – Ben Marshall Mar 23 '16 at 13:51

score 1 · Answer 2 · answered Mar 23 '16 at 13:50

You could use a gradient background to accomplish this effect.

I like to use this background generator, online to play around.

Here is a demo.

You will need to tweak the color stops.

body {
  height: 100vh;
  width: 100%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3232+0,ff3030+48,ffffff+48 */
background: #ff3232; /* Old browsers */
background: -moz-linear-gradient(45deg, #ff3232 0%, #ff3030 48%, #ffffff 48%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #ff3232 0%,#ff3030 48%,#ffffff 48%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #ff3232 0%,#ff3030 48%,#ffffff 48%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

<div>
</div>

CSS only 2 striped background (skewed)

2 Answers2