<div class="container">
  <h1 class="title">Pure CSS Weather Icons</h1>
  <!-- .clear or .sunny -->
  <div class="weatherIcon">
    <div class="sunny">
      <div class="inner"></div>
    </div>
  </div>
  <!-- .mostlysunny or .partlycloudy -->
  <div class="weatherIcon">
    <div class="mostlysunny">
      <div class="inner"></div>
    </div>
  </div>
  <!-- .mostlycloudy or .partlysunny -->
  <div class="weatherIcon">
    <div class="mostlycloudy">
      <div class="inner"></div>
    </div>
  </div>
  <!-- .cloudy -->
  <div class="weatherIcon">
    <div class="cloudy">
      <div class="inner"></div>
    </div>
  </div>
  <!-- .fog or .hazy -->
  <div class="weatherIcon">
    <div class="fog">
      <div class="inner"></div>
    </div>
  </div>
  <!-- .chancerain or .rain -->
  <div class="weatherIcon">
    <div class="rain">
      <div class="inner"></div>
    </div>
  </div>
  <!-- .chancetstorms or .tstorms -->
  <div class="weatherIcon">
    <div class="tstorms">
      <div class="inner"></div>
    </div>
  </div>
  <!-- .chancesleet or .sleet -->
  <div class="weatherIcon">
    <div class="sleet">
      <div class="inner"></div>
    </div>
  </div>
  <!-- .chanceflurries or .flurries -->
  <div class="weatherIcon">
    <div class="flurries">
      <div class="inner"></div>
    </div>
  </div>
  <!-- .chancesnow or .snow -->
  <div class="weatherIcon">
    <div class="snow">
      <div class="inner"></div>
    </div>
  </div>
</div>

/*---------------------------------------------
  PURE CSS WEATHER ICONS
  Class names match the icon values returned
  from the Wunderground API
----------------------------------------------*/
* { box-sizing: border-box; }
html { background: #86B9E0; }
h1.title {
  color: rgba(255,255,255,0.8);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.2em;
  font-weight: 100;
  letter-spacing: 1px;
  margin-bottom: 30px;
  text-transform: uppercase;
}
.container {
  margin: 12% auto;
  text-align: center;
  width: 80%;
}
.weatherIcon {
  display: inline-block;
  font-family: Helvetica, sans-serif;
  /* Redefine this font size if resizing height & width */
  font-size: 1em;
  height: 100px;
  line-height: 1em;
  margin: 2%;
  position: relative;
  width: 100px;
}
.weatherIcon:before, .weatherIcon:after {
  content: "";
  height: inherit;
  left: 0;
  top: 0;
  width: inherit;
}
.weatherIcon > div:before, .weatherIcon > div:after,
.weatherIcon .inner:before, .weatherIcon .inner:after {
  content: "";
  letter-spacing: 0;
  position: absolute;
}
.clear, .sunny, .mostlysunny, .partlycloudy, .mostlycloudy, .partlysunny, .cloudy, .fog, .hazy, .chancerain, .rain, .chancetstorms, .tstorms, .chancesleet, .sleet, .chanceflurries, .flurries, .chancesnow, .snow, .inner {
  height: inherit;
  width: inherit;
}

/*** Clear/Sunny ***/
.clear, .sunny {
  margin-top: 48.5%;
}
.clear, .clear:before, .clear > .inner:before, .clear > .inner:after, .sunny, .sunny:before, .sunny > .inner:before, .sunny > .inner:after {
  background: #FFD632;
  left: 0;
  top: 48.5%;
  width: 100%;
  height: 0.2em;
}
.clear:before, .sunny:before {
  transform: rotate(45deg);
}
.clear > .inner:before, .sunny > .inner:before {
  transform: rotate(90deg);
}
.clear > .inner:after, .sunny > .inner:after {
  transform: rotate(135deg);
}
.clear:after, .sunny:after {
  background: #FFD632;
  border-radius: 50%;
  height: 60%;
  left: 20%;
  top: 20%;
  width: 60%;
}

/*** Partly Cloudy/Mostly Sunny ***/
.mostlysunny, .partlycloudy {
  background: #FFD632;
  height: 80%;
  margin-left: 48.5%;
  top: 0;
  width: 0.2em;
}
.mostlysunny:before, .partlycloudy:before {
  background: #FFD632;
  left: 0;
  top: 48.5%;
  width: 100%;
  height: 0.2em;
}
.mostlysunny > .inner:before, .partlycloudy > .inner:before {
  border-bottom: 0.2em solid #FFD632;
  border-left: 0.2em solid #FFD632;
  height: 80%;
  left: 8%;
  top: -48.5%;
  transform: rotate(-45deg);
  width: 80%;
}
.mostlysunny > .inner, .partlycloudy > .inner {
  background: #FFD632;
  border-radius: 50%;
  height: 60%;
  left: 20%;
  position: absolute;
  top: 20%;
  width: 60%;
}
.mostlysunny > .inner:after, .partlycloudy > .inner:after {
  background: #fff;
  border-radius: 50%;
  bottom: -33%;
  height: 65%;
  right: -15%;
  width: 70%;
}
.mostlysunny:after, .partlycloudy:after {
  background: #fff;
  border-radius: 50%;
  bottom: 0;
  height: 50%;
  left: 10%;
  width: 55%;
}
/*** Mostly Cloudy/Partly Sunny ***/
.mostlycloudy,
.partlysunny {
  background: #FFD632;
  height: 80%;
  margin-left: 48.5%;
  top: 0;
  width: 0.2em;
}
.mostlycloudy:before, .partlysunny:before {
  background: #FFD632;
  left: 0;
  top: 48.5%;
  width: 100%;
  height: 0.2em;
}
.mostlycloudy > .inner:before, .partlysunny > .inner:before {
  border-bottom: 0.2em solid #FFD632;
  border-left: 0.2em solid #FFD632;
  height: 80%;
  left: 8%;
  top: -48.5%;
  transform: rotate(-45deg);
  width: 80%;
}
.mostlycloudy > .inner, .partlysunny > .inner {
  background: #FFD632;
  border-radius: 50%;
  height: 60%;
  left: 20%;
  position: absolute;
  top: 20%;
  width: 60%;
}
.mostlycloudy > .inner:after, .partlysunny > .inner:after {
  background: #fff;
  border-radius: 50%;
  bottom: -33%;
  height: 82%;
  right: -34%;
  width: 90%;
}
.mostlycloudy:after, .partlysunny:after {
  background: #fff;
  border-radius: 50%;
  bottom: 0%;
  height: 63%;
  left: 0;
  width: 70%;
}
/*** Cloudy ***/
.cloudy:before, .cloudy > .inner:before, .cloudy > .inner:after, .cloudy:after {
  background: #fff;
  border-radius: 50%;
}
.cloudy:before {
  height: 35%;
  right: 0;
  top: 0;
  width: 38%;
}
.cloudy > .inner:before {
  height: 27%;
  left: 45%;
  top: 8%;
  width: 30%;
}
.cloudy > .inner:after {
  bottom: 0;
  height: 50%;
  right: 0;
  width: 55%;
}
.cloudy:after {
  bottom: 0;
  height: 63%;
  left: 0;
  width: 70%;
}
/*** Fog / Hazy ***/
.fog:before, .fog:after, .hazy:before, .hazy:after {
  background: #fff;
  border-radius: 50%;
}
.fog:before, .hazy:before {
  height: 63%;
  left: 0;
  top: 0;
  width: 70%;
}
.fog:after, .hazy:after {
  height: 50%;
  right: 0;
  top: 13%;
  width: 55%;
}
.fog > .inner:before, .fog > .inner:after, .hazy > .inner:before, .hazy > .inner:after {
  color: #fff;
  content: "\2307";
  font-size: 5em;
  left: 7%;
  transform: rotate(90deg);
}
.fog > .inner:before, .hazy > .inner:before {
  bottom: 14%;
}
.fog > .inner:after, .hazy > .inner:after {
  bottom: 0;
}

/*** Chance Rain / Rain ***/
.chancerain:before, .chancerain > .inner:before, .rain:before, .rain > .inner:before {
  border-left: 0.2em dashed #fff;
  border-right: 0.2em dashed #fff;
  bottom: 0;
  height: 60%;
  transform: skew(-20deg);
  width: 13%;
}
.chancerain:before, .rain:before {
  left: 25%;
}
.chancerain > .inner:before, .rain > .inner:before {
  left: 57%;
}
.chancerain > .inner:after, .chancerain:after, .rain > .inner:after, .rain:after {
  background: #7799AF;
  border-radius: 50%;
}
.chancerain > .inner:after, .rain > .inner:after {
  height: 63%;
  left: 0;
  top: 0;
  width: 70%;
}
.chancerain:after, .rain:after {
  height: 50%;
  right: 0;
  top: 13%;
  width: 55%;
}

/*** Chance T-Storms / T-Storms ***/
.chancetstorms:before, .tstorms:before {
  background: #FFD632;
  height: 30%;
  left: 43%;
  top: 50%;
  transform: skew(-20deg);
  width: 10%;
}
.chancetstorms > .inner:before, .tstorms > .inner:before {
  border-right: 0.7em solid transparent;
  border-top: 1.9em solid #FFD632;
  bottom: 0;
  left: 45%;
  transform: skew(-20deg);
}
.chancetstorms > .inner:after, .chancetstorms:after,
.tstorms > .inner:after, .tstorms:after {
  background: #7799AF;
  border-radius: 50%;
}
.chancetstorms > .inner:after, .tstorms > .inner:after {
  height: 63%;
  left: 0;
  top: 0;
  width: 70%;
}
.chancetstorms:after, .tstorms:after {
  height: 50%;
  right: 0;
  top: 13%;
  width: 55%;
}
/*** Chance Sleet / Sleet ***/
.chancesleet:before, .sleet:before {
  border-left: 0.2em dashed #fff;
  border-right: 0.2em dashed #fff;
  bottom: 0;
  height: 60%;
  left: 30%;
  transform: skew(-20deg);
  width: 35%;
}
.chancesleet > .inner:before, .sleet > .inner:before {
  bottom: 12%;
  color: #fff;
  content: "\2733\ \ \2733";
  font-size: 1em;
  left: 27%;
  transform: rotate(-70deg);
  width: 40%;
}
.chancesleet > .inner:after, .chancesleet:after, .sleet > .inner:after, .sleet:after {
  background: #BACEDD;
  border-radius: 50%;
}
.chancesleet > .inner:after, .sleet > .inner:after {
  height: 63%;
  left: 0;
  top: 0;
  width: 70%;
}
.chancesleet:after, .sleet:after {
  height: 50%;
  right: 0;
  top: 13%;
  width: 55%;
}
/*** Chance Flurries / Flurries ***/
.chanceflurries > .inner:before, .chanceflurries > .inner:after, .flurries > .inner:before, .flurries > .inner:after {
  color: #fff;
  content: "\25CF\ \25CF\ \25CF";
  font-size: 1.1em;
}
.chanceflurries > .inner:before, .flurries > .inner:before {
  bottom: 17%;
  right: 25%;
}
.chanceflurries > .inner:after, .flurries > .inner:after {
  bottom: 0;
  left: 25%;
}
.chanceflurries:before, .chanceflurries:after,
.flurries:before, .flurries:after {
  background: #BACEDD;
  border-radius: 50%;
}
.chanceflurries:before, .flurries:before {
  height: 63%;
  left: 0;
  top: 0;
  width: 70%;
}
.chanceflurries:after, .flurries:after {
  height: 50%;
  right: 0;
  top: 13%;
  width: 55%;
}
/*** Chance Snow / Snow ***/
.chancesnow > .inner:before, .chancesnow > .inner:after, .snow > .inner:before, .snow > .inner:after {
  color: #fff;
  content: "\2733\ \2733\ \2733";
  font-size: 1em;
}
.chancesnow > .inner:before, .snow > .inner:before {
  bottom: 17%;
  right: 21%;
}
.chancesnow > .inner:after, .snow > .inner:after {
  bottom: 0;
  left: 21%;
}
.chancesnow:before, .chancesnow:after,
.snow:before, .snow:after {
  background: #BACEDD;
  border-radius: 50%;
}
.chancesnow:before, .snow:before {
  height: 63%;
  left: 0;
  top: 0;
  width: 70%;
}
.chancesnow:after, .snow:after {
  height: 50%;
  right: 0;
  top: 13%;
  width: 55%;
}