search

LeaVerou / css3patterns

The popular CSS3 patterns gallery, now on Github :)
https://leaverou.github.io/css3patterns/
MIT License
1.44k stars 262 forks source link

Pattern question #140

Open bartosz-k opened 8 years ago

bartosz-k commented 8 years ago

Hi! Anyone have an idea how to create 45deg (or any degree) rotated tablecloth pattern? :)

Best, Bartek

Pandiora commented 8 years ago

Can you give an example of what you want to achieve?

BillyNate commented 8 years ago

@bartq Take the diagonal stripes pattern, use the colors from the tablecloth pattern to change the diagonal stripes to the correct colors (don't forget to set the correct transparency), and finally copy-paste this one stripe to become two stripes and tweak the rotation of the second stripe ;) Result should be something like

{ background-color: white; background-image: repeating-linear-gradient(45deg, rgba(200, 0, 0, 0.5), rgba(200, 0, 0, 0.5) 35px, transparent 35px, transparent 70px), repeating-linear-gradient(135deg, rgba(200, 0, 0, 0.5), rgba(200, 0, 0, 0.5) 35px, transparent 35px, transparent 70px); }
bartosz-k commented 8 years ago

thanks, will validate it a bit later when I'm back to this project.

msr8 commented 2 years ago

Is this what you want?

image