Code review: CSS Instagram icon

It's really well done, about as close to pixel perfect as my eye can detect. I wouldn't worry about the nested divs, the code is pretty good on the semantic/organization front.

However it could use some work on, DRY-ing up your CSS, you can drop 20% of your CSS that way.

I'd round up your rems at 3 decimal places, the way the math works out you end up with the same size and more readable code. There's no need to use hundreds for your z-index 2-9 will work fine.

I couldn't find a way to keep the width and height of an element or class linked so that the icon would scale proportionally.

Set a fixed width (in pixels) for your body, using media queries to scale it. Then convert all of your rems to %, as your viewport size changes the percentages should change as well.

To make the lines DRY-er and use percentages ...

  <div class = "stripe">
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="green"></div>
    <div class="blue"></div>
  </div>

.stripe { 
  position: absolute;
  top: 32%;
  height: 39%;
}

.stripe > div { 
  z-index: 2;
  height: 25%;
}

Thanks for your excellent suggestions. I DRY-ed out the stripes, rounded up the rems, revised the z-indexes, and will make a second version with percentage units.

pretty slick!!