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;
}