A CodePen by Greg Lavallee. DCSS - It's a DC Flag, in pure CSS. Originally, I was going to hav ethe stars be squares with five white triangles blocking out bits of the square. This uses the borders trick to make the triangles (see: http://css-tricks.com/snippets/css/css-triangle/)

index.html

<div class="flag">
  <div class="stars">
    <div class="star star-first">
      <div class="star-arrow star-arrow-one"></div>
      <div class="star-arrow star-arrow-two"></div>
      <div class="star-arrow star-arrow-three"></div>
    </div>
    <div class="star">
      <div class="star-arrow star-arrow-one"></div>
      <div class="star-arrow star-arrow-two"></div>
      <div class="star-arrow star-arrow-three"></div>
    </div>
    <div class="star star-last">
      <div class="star-arrow star-arrow-one"></div>
      <div class="star-arrow star-arrow-two"></div>
      <div class="star-arrow star-arrow-three"></div>
    </div>
  </div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

<!-- <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Flag_of_Washington%2C_D.C..svg/600px-Flag_of_Washington%2C_D.C..svg.png"> -->

style.less

@flag_width: 300px;
@star_xy: @flag_width/10;
@stars_width: @flag_width/1.685393258;
@stars_inner_margin: @flag_width/8;

.flag {
  width: @flag_width;
}

.stars {
  margin: 0 auto;
  width: @stars_width;
}

.star {
  display: inline-block;
  position: relative;
  width: @star_xy;
  height: @star_xy;
}

.star-arrow {
  width: 0;
  height: 0;
  // http://css-tricks.com/snippets/css/css-triangle/
  border-left: @star_xy/2 solid transparent;
  border-right: @star_xy/2 solid transparent;
  border-bottom: none;
  border-top: 10px solid red;
  top: @star_xy/2;
  position: absolute;
}

.star-arrow-two {
  .rotation(72deg);
}

.star-arrow-three {
  .rotation(360/5*2deg);
}

.star-first {
  margin-right: @stars_inner_margin;
}

.star-last {
  margin-left: @stars_inner_margin;
}

.arrow {
  height: 0;
  width: 0;
  border-color: white;
  position: absolute;
}

.bar {
  background-color: red;
  height: 30px;
  margin: 20px 0;
}

// Less Elements
.rotation(@deg:5deg){
  .transform(rotate(@deg));
}

.transform(...) {
  -webkit-transform: @arguments;
  -moz-transform: @arguments;
  -o-transform: @arguments;
  -ms-transform: @arguments;
  transform: @arguments;
}



// Note to self: you originally tried doing this as five white triangles instead of the three red ones:

// The formula for calculating the heights of those triangles was something insane like:

// sqrt((((21.2132034356*sin(54degrees))/sin(72degrees))^2) - 225)

// And the 21.2132034356 came from a little a^2+b^2=c^2 action