Patte Patte - 3 days ago 4
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

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">
</div>

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.

Comments