CSS3 1px diagonal lines gradient

Question

I want to create a diagonal pattern using CSS3, something like this:

enter image description here

So 1px dark diagonal line, 1px light diagonal line and so on...

This is what i came up with, i feel like i'm close but something is defenitely not right:

background-color: #454545;
background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2) 1px, transparent 1px, transparent 4px);

Demo:

http://tinkerbin.com/6mTBtADt

score 3 · Accepted Answer · answered Jan 29 '13 at 14:39

3

just use background-size with your exisiting code try to add this background-size: 8px 8px;

answered Jan 29 '13 at 14:39

Villi Katrih

389
1
3
16

2

I just change the background size to 4px-4px and the last value in the gradient to 3px(i'm not sure whats the logic between these two values, but its working now: http://tinkerbin.com/6mTBtADt) – passatgt Feb 03 '13 at 12:59

score 1 · Answer 2 · answered Jan 29 '13 at 14:29

Your code looks great in Firefox, but I can see the problem when I view it in Chrome.

It actually looks like your gradient is correct, because if you cause redraws on the browser (i.e. by resizing it) it sometimes looks close to the Firefox version. This leads me to believe it is a bug in Chrome.

If you increase from 1px to 4px you can see it is working, but very jagged.

CSS3 1px diagonal lines gradient

2 Answers2

Linked