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.