Apple Logo

by Shobhit Sharma

HTML

<link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>

<div class="apple">
    <div class="top"><span></span></div>
    <div class="butt"><span></span></div>
    <div class="bite"></div>
</div>
<h1>Apple logo in 100% pure CSS</h1>

CSS

.apple, .butt:before, .top span:after, .butt:after, .top:before, .top:after, .butt:before, .butt:after {
    background: #FFF; /* foreground color */
}
body, .bite, .butt span, .butt, .top, .top span {
    background: #CCC; /* background color */
}
.apple {
    width: 376px;
    height: 334px;
    border-radius: 36% 36% 41% 41% / 42% 42% 75% 75%;   
    position: relative;
    margin: 90px auto 40px auto;
}
.bite {
    position: absolute;
    width: 60%;
    height: 62%;
    right: -40%;
    top: 8%;
    border-radius: 60%;
}
.butt span {
    display: block;
    position: absolute;
    border-radius: 100% 100% 0% 0%;
    width: 24.5%;
    height: 400%;
    bottom: -239%;
    left: 38%;
}
.butt {
    position: absolute;
    width: 100%;
    height: 4%;
    bottom: -1%;
}
.butt:before {
    content: '';
    position: absolute;
    width: 24%;
    height: 400%;
    border-radius: 0% 0% 100% 100%;
    left: 21%;
    bottom: 38%;
}
.butt:after {
    content: '';
    position: absolute;
    width: 23.4%;
    height: 400%;
    border-radius: 0% 0% 100% 100%;
    right: 21%;
    bottom: 38%;
}
.top span {
    display: block;
    position: absolute;
    border-radius: 0 0 44% 44% / 0 0 100% 100%;
    width: 63%;
    height: 259%;
    top: -92%;
    left: 18.6%;
    z-index: 3;
}
.top span:after {
    border-radius: 100% 0 100% 0;
    content: "";
    height: 242%;
    left: 41%;
    position: absolute;
    top: -193%;
    width: 90%;
}
.top {
    position: absolute;
    width: 42%;
    height: 4%;
    top: 0px;
    left: 29%;
}
.top:before {
    content: '';
    position: absolute;
    width: 62%;
    height: 260%;
    border-radius: 100% 100% 0% 0% / 100% 200% 0% 0%;
    left: -27%;
    top: 1%;
}
.top:after {
    content: '';
    position: absolute;
    width: 62%;
    height: 260%;
    border-radius: 100% 100% 0% 0% / 200% 100% 0% 0%;
    right: -27%;
    top: 1%;
}
h1 {
    text-align: center;
    font-family: 'Sansita One', sans-serif;
    font-size: 50px;
    color:...