USA Flag in CSS
Tags: codepen, css, webdev, showdev
Published: 2020-03-06 19:51:25


*This was originally published on [codinhood.com](https://codinhood.com/micro/usa-flag-css)*

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.

{% codepen https://codepen.io/codypearce/pen/XWbzKVX %}


## Background and Colors

The [official colors](https://en.wikipedia.org/wiki/Flag_of_the_United_States) 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`.

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

```css
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%);
}
```

![USA Background](https://codinhood.com/static/aa731b05a8c3505e32c0c6bd6a98bebe/14e05/background.png)

## Flag container

The official dimensions of the flag, from [Wikipedia](https://en.wikipedia.org/wiki/Flag_of_the_United_States), 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`.

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

```css
.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 Container](https://codinhood.com/static/3239ea429531afa1a6368643f141b682/14e05/container.png)

## 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 `div`s 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.

```html
...
<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>
...
```

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

![USA Stripes](https://codinhood.com/static/2cdc101b0e437d98edebecaaa9c3f6c8/14e05/stripes.png)

## 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.

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

```css
.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 Star Background](https://codinhood.com/static/6d6087ca3447222de5651c22a0cbd8fb/14e05/blue-background.png)

## USA Stars CSS

Alfred Genkin's article, [Five Methods for Five-Star Ratings](https://css-tricks.com/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](https://stackoverflow.com/questions/23587369/increasing-the-text-size-of-unicode-symbol-occupies-too-much-margin) 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.

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

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

![USA Star CSS](https://codinhood.com/static/e004eda953d22a82fc3a95caca315c0e/97efd/star.png)

## 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`.

```html
<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>
```

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

![USA Star Row CSS](https://codinhood.com/static/5abe94354a8cee55fc8c7403f07b1b95/14e05/star-row.png)

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.

```html
<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>
```

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

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

![USA Flag in CSS](https://codinhood.com/static/499b91b7bd226adfbfa01df14bf3275f/14e05/cover-test.png)

## 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.


{% codepen https://codepen.io/codypearce/pen/zmNzwZ %}