Welcome to 10For2 Web Development

An online presence is more than just a website; it’s the face of your company to the world. We specialize in developing that presence for small to medium size businesses.

Full Service Online Solutions

While our main focus is website design and development, we also specialize in marketing material, video production, and email and data hosting. Our goal is to become your one-stop shop for business identity solutions.

Login Panel




web development · content strategy · e-commerce wordpress · site maintenance · social media · seo

Blog Entry » January 24th, 2013

CSS Colorado Flag

Every now and then I get an idea for a fun CSS development experiment. Not that long ago I posted one for the CSS Club as an ode to our logo. Recently, I think while taking a shower (sometimes the best thoughts come in there), I thought “Hey, know what would be cool? A Colorado state flag made entirely of CSS!” I Googled it and didn’t find anything so I set out to create it. The square bit was rather easy, and I got the two circles pretty quickly, but it took me a while to figure out how to break open the red circle on the right. I played around with a third ‘div’, but ultimately knew there had to be a way to do it with just two. I shelved it until today when I remembered seeing a “pacman” css shape some time ago. Utilizing the pacman enabled me to free up ‘circle:before’ to use for the break area.

If you want to play around with it, you can check it out on Codepen

CSS Colorado Flag Example in Action

Here is the resulting code:

The HTML:

<div id="flag"></div>
<div id="circle"></div>

The CSS:


#flag {
	height: 180px;
	width: 300px;
	margin: 0 auto;
	background: #ffffff;
	position: absolute;
	z-index: 100;

}
#flag:before {
	background: #081C59;
	height: 60px;
	width: 300px;
	content: "";
	position: absolute;
	z-index: 100;
}
#flag:after {
	background: #081C59;
	height: 60px;
	width: 300px;
	content: "";
	position: absolute;
	z-index: 100;
	top: 120px;
}
#circle { 
  border-right: 50px solid red;
  border-left: 50px solid red;
  border-top: 50px solid red;
  border-bottom: 50px solid red;
  -moz-border-radius: 50px; 
  -webkit-border-radius: 50px; 
  border-radius: 50px;
  position:absolute;
  left: 35px;
  z-index: 100;
  top: 50px;
} 
#circle:after { 
  -moz-border-radius: 50px; 
  -webkit-border-radius: 50px; 
  border-radius: 50px;
  position:absolute;
  left: -25px;
  top: -25px;
  z-index: 100;
  content: "";
  border: 25px solid yellow;
}
#circle:before { 
  position:absolute;
  left: -10px;
  top: -25px;
  z-index: 100;
  content: "";
  border-right: 35px solid white;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid transparent;
}

This entry was posted on January 24th, 2013 @ 11:42am and is filed under Blog, Code, CSS3. You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.

Leave a Reply