Apple logo

by dreamdealer

HTML

<div class="apple">
    <div class="top"></div>
    <div class="butt"></div>
    <div class="bite"></div>
    <div class="steeltje "></div>
</div>

CSS

.apple {
    width: 400px;
    height: 400px;
    background: red;
    -moz-border-radius: 50% 50% 40% 40% / 50% 50% 70% 70%;   
    position: relative;
    margin-top: 10%;
}
.butt {
    position: absolute;
    content: '';   
    width: 60%;
    height: 40%;
    background: #FFF;
    border-radius: 50%;
    bottom: -35%;
    left: 50%;
    margin-left: -30%;
}
.butt:after {
    position: absolute;
    content: '';   
    width: 33%;
    height: 10%;
    border-radius: 50%;
    background: red;
    top: -4%;
    left: 15%;
    -moz-transform: rotate(-23deg);
}
.butt:before {
    position: absolute;
    content: '';   
    width: 33%;
    height: 10%;
    border-radius: 50%;
    background: red;
    top: -4%;
    right: 15%;
    -moz-transform: rotate(23deg);
}
.top {
    position: absolute;
    content: '';   
    width: 50%;
    height: 36%;
    background: #FFF;
    border-radius: 50%;
    top: -27%;
    left: 50%;
    margin-left: -25%;
}
.bite {
    position: absolute;
    content: '';   
    width: 55%;
    height: 55%;
    border-radius: 50%;
    background: #FFF;
    top: 10%;
    right: -30%;
}
.steeltje {
    position: absolute;
    content: '';   
    width: 23%;
    height: 23%;
    border-radius: 50% 0% 50% 0%;
    background: red;
    top: -20%;
    right: 30%;
    -moz-transform: rotate(-45deg) scaley(.6) rotate(45deg);
}