US Flag

HTML and CSS only

by vikikamath

HTML

<div class='outer'>
  <div class='inner'>
    <p class="red">&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p>
    <p class="white">&nbsp;&#9733;&#9733;&#9733;&#9733;&#9733;</p>
    <p class="red">&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p>
    <p class="white">&nbsp;&#9733;&#9733;&#9733;&#9733;&#9733;</p>
    <p class="red">&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p>
    <p class="white">&nbsp;&#9733;&#9733;&#9733;&#9733;&#9733;</p>
    <p class="red">&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p>
  </div>
</div>

CSS

.outer {
  border: 1px solid #ccc;
  width: 600px;
  height: 400px;
  z-index: 1;
  background-color: rgba(0,0,0);
  background-image: linear-gradient(rgba(255,0,0,1) 50%, transparent 50%);
  background-size: 62px 62px;
}


.inner {
  z-index: 3;
  width: 217px;
  height: 217px;
  background-color: blue;
  position: absolute;
}

p {
  color: #fff;
  margin: 0.6em 1em;
  letter-spacing: 1.2em;
}