Patte Patte - 1 year ago 90
CSS Question

Multiple colors in div

I want a div that looks like this enter image description here
How do i set the squares to 100x100px and reapeat the process?

Answer Source

This would be pure css:

#dotted {
  width: 1000px;
  height: 100px;
  background: repeating-linear-gradient(90deg, #DF0000, #DF0000 100px, #000000 100px, #000000 200px)
<div id="dotted">

Here's a jsFiddle.

If you want to set the width and the height of the squares, just change the normal height and fix the 100px inside of the background to whatever you like. The 200px have to be the double of the 100px.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download