USA Flag in CSS

This was originally published on codinhood.com

Recreating the Stars and Stripes of the United States Flag in CSS is another fun exercise to practice your CSS skills. Although each element of the flag can be recreated in numerous ways, we're going to try to keep it as simple as possible.

Background and Colors

The official colors are Old Glory Red (#B22234) and Old Glory Blue (#3C3B6E), but using those colors makes the flag look a little washed out on the web, so we're going to use #9b1c2c for red and #041E42 for blue. We can create a simple linear-gradient that goes from left-to-right by rotating the default linear-gradient position by 90deg.

<div class="container"></div>

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(90deg, #041e42 20%, #9b1c2c 100%);
}

Flag container

The official dimensions of the flag, from Wikipedia, indicate that width should be 1.9 the height, but we will approximate this by setting the width to 900px and the height to exactly half, 450px. We can scale the flag down using the transform property and scale() function at various screen widths to make our flag responsive. Finally, we're going to overlay the blue star section over the stripes using position: absolute, so we need to set this flag container to have position: relative.

<div class="container">
  <div class="USA-flag"></div>
</div>

.USA-flag {
  width: 900px;
  min-width: 900px;
  height: 450px;
  box-shadow: 0px 20px 80px 10px rgba(0, 0, 0, 0.25);
  position: relative;
}

@media (max-width: 1000px) {
  .USA-flag {
    transform: scale(0.75);
  }
}
@media (max-width: 725px) {
  .USA-flag {
    transform: scale(0.5);
  }
}
@media (max-width: 475px) {
  .USA-flag {
    transform: scale(0.375);
  }
}

@media (max-width: 340px) {
  .USA-flag {
    transform: scale(0.325);
  }
}

USA Stripes CSS

The USA flag has 13 stripes, 7 red stripes and 6 white, of equal height and width. One easy way to create this with CSS is to set the background to white and add 7 red stripes evenly spaced. However, if you want to add an animation to the stripes, or want more control over each stripe individually, then creating a separate HTML element for each stripe makes sense. Create 13 divs with the class name stripe and every other one stripe with the class name stripe stripe--white. Since each needs to be the exact same height, we can use the CSS function calc() to divide the total height of the flag (450px) by 13 to get the exact height needed for each stripe.

...
<div class="USA-stripes">
  <div class="stripe"></div>
  <div class="stripe stripe--white"></div>
  <div class="stripe"></div>
  <div class="stripe stripe--white"></div>
  <div class="stripe"></div>
  <div class="stripe stripe--white"></div>
  <div class="stripe"></div>
  <div class="stripe stripe--white"></div>
  <div class="stripe"></div>
  <div class="stripe stripe--white"></div>
  <div class="stripe"></div>
  <div class="stripe stripe--white"></div>
  <div class="stripe"></div>
</div>
...

.stripe {
  background-color: #9b1c2c;
  width: 100%;
  height: calc(450px / 13);
}
.stripe--white {
  background-color: white;
}

USA Blue Star Background

Since we set position:relative on the flag container, we can easily overlay the blue star background ontop of the stripes by using position:absolute, top: 0, and left:0. The blue background size stretches to the edge of the 7th stripe. This means that the height of the blue background is equivalent to the height of 7 stripes. From above, the height of a stripe is calc(450px / 13), so 7 times that height gives us the correct height calc((450px / 13) * 7). We also need to set a bit of padding to push the stars out from the edge of the blue background.

<div class="container">
  <div class="USA-flag">
    <div class="USA-stars"></div>
    <div class="USA-stripes">...</div>
  </div>
</div>

.USA-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 378px;
  height: calc((450px / 13) * 7);
  background-color: #041e42;
  z-index: 1;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

USA Stars CSS

Alfred Genkin's article, Five Methods for Five-Star Ratings, dives into the tradeoffs of creating star shapes using HTML and CSS. The pure CSS methods are, while quite impressive, complicated and tricky to implement. For this tutorial, we're going to use the suggested method from that article, the Unicode character ★ which you can copy and paste straight into the HTML. One problem with Unicode characters, unfortunately, is that they often contain extra margins built into the glyph itself, which can mess up the spacing of each element. For this particular glyph, we can add margin-top: -4px to offset some of the glyph's internal margins.

<div class="star">★</div>

.star {
  font-size: 20px;
  color: white;
  display: flex;
  justify-content: center;
  margin-top: -4px;
}

Star Rows

The USA flag has 50 stars broken into 9 rows that alternate between 6 stars and 5 stars per row. For both types of rows, we need to space each star out evenly across the container. We can do this easily with flexbox by setting justify-content to space-between.

<div class="star-row">
  <div class="star">★</div>
  <div class="star">★</div>
  <div class="star">★</div>
  <div class="star">★</div>
  <div class="star">★</div>
  <div class="star">★</div>
</div>

.star-row {
  display: flex;
  justify-content: space-between;
}

Rows with 5 stars, however, need to be inset from both sides so that they fill the "gaps" in between rows with 6 stars. We can do this by simply adding padding on either side of the row.

<div class="star-row star-row--five">
  <div class="star">★</div>
  <div class="star">★</div>
  <div class="star">★</div>
  <div class="star">★</div>
  <div class="star">★</div>
</div>

.star-row--five {
  padding: 0px 33px;
}

Finally, just add the rest of the rows with the appropriate number of stars for each row.

Expanding the Demo

We could expand this demo by adding a flag pole, making the flag wave in the wind, or fold the flag up in an interesting way. One example, that I made a few years ago, spins the stars around and animates the stripes downward. Click rerun to see the animation again.