It is necessary to arrange 4 colors in sequence. Each color block is 100px. If the screen width is more than 400px, then repeat colors. If less, then remove the colors. You need to add and remove colors as you increase and decrease the screen. That is, at 360px there will be 3 full colors and 60px fourth color.

Suppose a 400px screen would be like this:

enter image description here

For 600px it will be like this:

enter image description here

How to do it in pure CSS (no images)?

    4 answers 4

    Very interesting question, found the following solution:

    .block, .second-block { width: 400px; height: 100px; margin-bottom: 20px; background-image: repeating-linear-gradient(90deg, #FF0000 0px, #FF0000 100px, #FF9000 100px, #FF9000 200px, #FCFF00 200px, #FCFF00 300px, #12FF00 300px, #12FF00 400px); } .second-block { width: 600px; } 
     <div class="block"></div> <div class="second-block"></div>

    Info: MDN

      Specification Reference
      Can i use
      Mozilla Examples

       .rainbow { box-sizing: border-box; background: repeating-linear-gradient( to right, red 0%, red 50px, orange 51px, orange 100px, yellow 101px, yellow 150px, green 151px, green 200px, aqua 201px, aqua 250px, blue 251px, blue 300px, purple 301px, purple 350px ); width: 500px; height: 50px; margin-top: 30px; } .rainbow.half-width { width: 250px; } 
       <div class="rainbow"></div> <div class="rainbow half-width"></div>

        That's the way you can :)

         background-image: repeating-linear-gradient(90deg, #FF0000 0px, #FF0000 100px, #FF9000 100px, #FF9000 200px, #FCFF00 200px, #FCFF00 300px, #12FF00 300px, #12FF00 400px);

          Oh horror, the worst option I have.
          As an option to wrap everything in one div and throw divas there with backgrounds with a "margin" for the widest monitor.

          There are downsides: ie up to 10 is not supported, the last block will be added if the width of the container is a multiple of the width of the blocks.

          This is a crutch g / code, so I would recommend using jQuery not only css, but all the same. Then it will be possible to calculate the width of the container and gash how many investments are needed and the last block of the required width.

          As an option to generate an image on the server and insert it into the background with a repetition horizontally. For generation it will be necessary to write at least some model.

           .flex { display: flex; flex-wrap: wrap; width: 500px; max-height: 100px; overflow: hidden; } .flex > div { width: 100px; height: 100px; } .flex > div.clr1 { background: #FF0000; } .flex > div.clr2 { background: #FF9000; } .flex > div.clr3 { background: #FCFF00; } .flex > div.clr4 { background: #12FF00; } 
           <div class="flex"> <div class="clr1"></div> <div class="clr2"></div> <div class="clr3"></div> <div class="clr4"></div> <div class="clr1"></div> <div class="clr2"></div> <div class="clr3"></div> <div class="clr4"></div> <div class="clr1"></div> <div class="clr2"></div> <div class="clr3"></div> <div class="clr4"></div> <div class="clr1"></div> <div class="clr2"></div> <div class="clr3"></div> <div class="clr4"></div> <div class="clr1"></div> <div class="clr2"></div> <div class="clr3"></div> <div class="clr4"></div> </div>