Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Background Stripes on div

Tags:

html

css

So I have a square div and i'm trying to get the background to basically look like this :

enter image description here

I've had a look around, and since this question has been asked a lot i've seen CSS gradients used.

I've been playing about and ended up with:

background-image: linear-gradient(
  180deg, rgba(255, 255, 255, .2) 29%,
  transparent 20%,
  transparent 51%,
  rgba(255, 255, 255, .2) 50%,
  rgba(255, 255, 255, .2) 75%,
  transparent 75%,
  transparent);

However, gradients seem to blend the colours from one to another instead of having a sharp difference like below.

What should I be doing to achieve the picture?

like image 242
pourmesomecode Avatar asked Jun 23 '16 11:06

pourmesomecode


2 Answers

try this :

div#stripes {
  height: 200px;
  width: 200px;
  background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, #fff);
  background-size: 50px 50px;
}
<div id="stripes">

</div>

jsfiddle

like image 185
Mihai T Avatar answered Oct 06 '22 18:10

Mihai T


You can do like this:

background: repeating-linear-gradient(-45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px);

Jsfiddle

like image 26
Advaith Avatar answered Oct 06 '22 17:10

Advaith