how to create a repeating rainbow of nested divs is CSS

Question

I would like to have some nested divs with a different colour border which have a repeating pattern.

E.g. I could have 5 colours, red, blue, green, yellow, orange

I would like to have the same effect as below would give, but using a css only based on the position of the DIV rather than actually having to add a class name onto each div

<div class="redBorder">
  <div class="blueBorder">
    <div class="greenBorder">
      <div class="yellowBorder">
        <div class="orangeBorder">
          <div class="redBorder">
            <div class="blueBorder">
              <div class="greenBorder">
                <div class="yellowBorder">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

This is similar to the question posted here, but I would like to specify the colours used at each nth step.

Repeating a set of colors on nested divs with CSS

I have tried the following from the examples given...

<style>
    div {
        border: 2px solid #ccc;
        border-top: 5px solid #ccc;
        padding: 5px;
        padding-top: 50px;
        border-radius: 5px;
    }

    div {
        border-color: linear-gradient(
                to right,
                red calc(0 * 100% / 4) calc(1 * 100% / 4),
                blue calc(1 * 100% / 4) calc(2 * 100% / 4),
                green calc(2 * 100% / 4) calc(3 * 100% / 4),
                yellow calc(3 * 100% / 4) calc(4 * 100% / 4)
            )
            calc(var(--x) * 100% / 3) 0/400% 100%;
    }
</style>

With the following markup, but this has not worked

<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Thanks for the examples, I am struggling to get them to work though, border-color with linear gradient doesn't seem to work — user3284707, Nov 12 '19 at 11:06
Please include your complete code, including your own attempts to create the colours. — Kokodoko, Nov 12 '19 at 11:20
_“border-color with linear gradient doesn't seem to work”_ - a gradient is actually considered an _image_, not a _color_. — 04FS, Nov 12 '19 at 11:26

Temani Afif · Accepted Answer · 2019-11-12T11:47:56.283

If you can alternate the nesting using different elements you can try something like below using CSS variables. We need different elements to be able to increment a variable on each level combining two variables. (related: Can a recursive variable be expressed in css?)

I considered 4 colors but you can easily scale to any number:

:root {
  --p:0;
  --x:0;
}

.first,
.first span,
.first div{
  padding:10px;
  border:5px solid transparent;
  background:
    linear-gradient(white,white) padding-box, /* Color only the padding box*/
    /* N = 4*/
    repeating-linear-gradient(
      red    0              calc(100%/4),
      blue   calc(1*100%/4) calc(2*100%/4),
      green  calc(2*100%/4) calc(3*100%/4),
      purple calc(3*100%/4) calc(4*100%/4)) 
   0 calc(var(--p)*100%/3)/ /* 0 var(--p)*100%/(N-1) */
   100% 400% /* Width:100% height:N*100% */
   border-box; /* Color the border area */
}
.first span {
  --p:calc(var(--x) + 1);
  display:block;
}
.first div {
  --x:calc(var(--p) + 1);
  background-position:0 calc(var(--x)*100%/3); /* 0 var(--x)*100%(N-1) */
}

<div class="first">
  <span>
    <div>
     <span>
      <div>
      <span>
       <div>
        <span>
          <div>
          </div>
        </span>
       </div>
     </span>
    </div>
   </span>
  </div>
 </span>
</div>

You can also keep the same element and use a class to differentiate:

:root {
  --p:0;
  --x:0;
}

.first,
.first *{
  padding:10px;
  border:5px solid transparent;
  background:
    linear-gradient(white,white) padding-box, /* Color only the padding box*/
    /* N = 4*/
    repeating-linear-gradient(
      red    0              calc(100%/4),
      blue   calc(1*100%/4) calc(2*100%/4),
      green  calc(2*100%/4) calc(3*100%/4),
      purple calc(3*100%/4) calc(4*100%/4)) 
   0 calc(var(--p)*100%/3)/ /* 0 var(--p)*100%/(N-1) */
   100% 400% /* Width:100% height:N*100% */
   border-box; /* Color the border area */
}
.first div.x {
  --p:calc(var(--x) + 1);
}
.first div:not(.x) {
  --x:calc(var(--p) + 1);
  background-position:0 calc(var(--x)*100%/3); /* 0 var(--x)*100%(N-1) */
}

<div class="first">
  <div class="x">
    <div>
      <div class="x">
        <div>
          <div class="x">
            <div>
              <div class="x">
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@RoToRa replace it with a `section`, a cutom tag, etc .. I am demonstrating an idea (which is working) and not focusing on the validity of the code — Temani Afif, Nov 12 '19 at 11:39
I'd prefer not to have to do the workarounds, but if this is the only way, then I guess it's the only way, thanks so much for your answer. — user3284707, Nov 12 '19 at 12:21

how to create a repeating rainbow of nested divs is CSS

1 Answers1