The following Facebook icon is made using pure CSS and only one HTML tag.

How was it made?


<p class="logo">Facebook</p>

The CSS:

.logo { background: #4661b0; text-indent: -999em; width: 100px; height: 110px; border-radius: 3px; position: relative; overflow: hidden; border: 15px solid #4661b0; border-bottom: 0; } .logo:before { content: "/20"; position: absolute; background: #4661b0; width: 40px; height: 90px; bottom: -30px; right: -37px; border: 20px solid white; border-radius: 25px; } .logo:after { content: "/20"; position: absolute; width: 55px; top: 50px; height: 20px; background: white; right: 5px; }