Pure CSS Rss Icon
Here, you can see a simple RSS icon created using CSS3. You might ask now that how those curved lines are made. Actually, the answer is very simple. It is created using a simple square with transparent background and a thick border (this is what you see as the curved line). This thick border is then given a nice border-radius so that the square turns into a circle. Now the main trick here to convert this circle into an arc is by using the border-color property. The value passed in this property is white transparent transparent transparent, which means, the top border color will be white while other borders will be transparent so we see an arc only.
Then this arc is rotated using rotate transform so that it fits perfectly in the place. Wasn't that very simple? The curves and dot are animated using the transition property. Learn more about this creation by looking at the code.