Checkerboard pattern with CSS3

This content originally appeared on Lea Verou’s blog and was authored by Lea Verou

A while ago, I wrote a post on creating simple patterns with CSS3 gradients. A common pattern I was unable to create was that of a regular, non-rotated checkerboard. However, I noticed today that by giving a different background-position to every triangle in the pattern tile, a checkerboard can be easily created:

View in Gecko or Webkit. Webkit seems to have an odd rendering bug, so it needed a background-size override and it still doesn’t look perfect. Oh well, reported the bug and moved on.

This content originally appeared on Lea Verou’s blog and was authored by Lea Verou

Print Share Comment Cite Upload Translate Updates

APA

Lea Verou | Sciencx (2011-02-16T00:00:00+00:00) Checkerboard pattern with CSS3. Retrieved from https://www.scien.cx/2011/02/16/checkerboard-pattern-with-css3/

MLA

" » Checkerboard pattern with CSS3." Lea Verou | Sciencx - Wednesday February 16, 2011, https://www.scien.cx/2011/02/16/checkerboard-pattern-with-css3/

HARVARD

Lea Verou | Sciencx Wednesday February 16, 2011 » Checkerboard pattern with CSS3., viewed ,<https://www.scien.cx/2011/02/16/checkerboard-pattern-with-css3/>

VANCOUVER

Lea Verou | Sciencx - » Checkerboard pattern with CSS3. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2011/02/16/checkerboard-pattern-with-css3/

CHICAGO

" » Checkerboard pattern with CSS3." Lea Verou | Sciencx - Accessed . https://www.scien.cx/2011/02/16/checkerboard-pattern-with-css3/

IEEE

" » Checkerboard pattern with CSS3." Lea Verou | Sciencx [Online]. Available: https://www.scien.cx/2011/02/16/checkerboard-pattern-with-css3/. [Accessed: ]

rf:citation

» Checkerboard pattern with CSS3 | Lea Verou | Sciencx | https://www.scien.cx/2011/02/16/checkerboard-pattern-with-css3/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.