A CodePen by Ana Tudor. Pastel triangle grid

index.haml

-(1..63).each do |i|
  .tri

style.scss

@import "compass";
$l: 10em;

$a: pi()/3;
$h: $l*sin($a);

html { overflow: hidden; background: grey; }
body { margin: 0 $l/4; width: 4.5*$l; }
.tri {
  $ra: $a/2;
  $sa: pi()/2 - $a;
  $sf: sin($a);
  float: left;
  overflow: hidden;
  margin: ($h - $l)/2 (-$l/4);
  width: $l; height: $l;
  @for $i from 0 to 2 {
    &:nth-child(2n + #{$i}) {
      transform: translate(0, pow(-1, $i + 1)*$h/2)
        rotate(#{$ra}rad) skewY(#{$sa}rad) scaleX($sf);
      @for $j from 0 to 7 {
        &:nth-child(7n + #{$j}) {
          &:before {
            background: hsl(($i*7 + $j)*360/14, 100%, 70%);
          }
        }
      }
      &:before {
        transform: scaleX(1/$sf) skewY(#{-$sa}rad) 
          rotate(#{-$ra}rad) translateY(pow(-1, $i)*50%);          
      }
    }
  }
  &:before {
    display: block;
    width: inherit; height: inherit;
    content: '';
  }
}