Creating shapes and icons with pure css is amazing, it means you as a designer can have more control of sizing issues within different browsers, when creating responsive designs and so much more.
 
I created the thumbnail icon in css for a little project and i also added a small image to the center of it.
 
The code is pretty straight forward, the main div #circleIcons and #circleIcons1 includes the background color of the circle, the width and height of the circle and the border radius. The border radius creates the circular effect, this code is also repeated for different browsers. The div #circleIcons1 also includes the opacity element which gives the second circle the faded effect.
 
To create the triangle the ‘::after’ selector is used. This selector means that the code included will be used after the original element. So once #circleIcons is on the page, i want the #circleIcons::after css to follow it. This is where the triangle is added, to finish of the icon.
 
The CSS to create the triangle is straightforward, certain borders are selected and exact thicknesses are claimed to create the shape. My margins are at particular percentages to allow it to be aligned at certain positions, these may be different for you.
 
CSS3
 

#circleIcons, #circleIcons1{position:relative;}

#circleIcons{background-color: #1C739A; height: 110px; width: 110px; -moz-border-radius:55px; -webkit-border-radius: 55px; border-radius:55px;}

#circleIcons::after{ content: ''; border-right: 10px solid transparent; border-left: 10px solid transparent; border-top: 20px solid #1B729A; margin: -9% 0% 0% 42%; display: block; position: absolute;}

#circleIcons1 { background-color: #1C739A; opacity: 0.3; height: 110px; width: 110px; -moz-border-radius: 55px; -webkit-border-radius: 55px; border-radius: 55px;}

#circleIcons1::after{ content: ''; border-right: 10px solid transparent; border-left: 10px solid transparent; border-top: 20px solid #1B729A; margin: 99% 0px 0px 42%; display: block; position: absolute;}

 
HTML
 
The HTML code is even easier than the css. The two divs need to be created/copied with in the page, and your icons are created.
 

<div id="circleIcons">
  <div id="circleIcons1"></div>!-- end circleIcons1 --> 
</div>!-- end circleIcons --> 

 
Certain aspects may have to be adjusted within your code, as other factors may impact upon it, but except for that, you have quickly and easily created an icon within a webpage, that is not an image.

© Copyright of Alexandra Milne 2013 | Privacy Policy | Disclaimer | Disclosure