Carlos Gallupa

by dreamdealer

HTML

<div class="aap">
    <div class="apenkop">
        <div class="ogen"></div>
    </div>
    <div class="body"></div>
    <div class="feet"></div>
</div>

CSS

.aap {
    width: 280px;
    height: 300px;   
    position: relative;
    margin: 100px;
    background: red;
    border-radius: 100% 100% 20% 20% / 100% 100% 50% 50%;
}
.apenkop {
    left: 50%;
    top: -3%;
    margin-left: -17%;
    background: red;
    width: 30%;
    height: 25%;
    border-radius: 150% 150% 100% 150% / 160% 200% 100% 150%;
    position: absolute;
    border: 5px solid white;
}
.apenkop:after {
    content: '';
    position: absolute;   
    background: red;
    width: 60%;
    height: 60%;
    top: -40%;
    left: 20%;
    border-radius: 50% 50% 0% 0%;
}
.apenkop:before {
    content: '';
    position: absolute;   
    background: red;
    width: 60%;
    height: 12%;
    right: -44%;
    bottom: -22%;
    border-radius: 0 20px 20px 0px;
    border: 5px solid white;
    z-index: 10;
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
.ogen {
    position: absolute;
    top: 25%;
    left: 20%;
    width: 60%;
    height: 10%;
    border-radius: 10px 10px 10px 10px;
    background: white;
}
.ogen:before {
    content: '';
    position: absolute;   
    background: white;
    width: 25%;
    height: 150%;
    bottom: -60%;
    left: 20%;
    border-radius: 50%; 
}
.ogen:after {
    content: '';
    position: absolute;   
    background: white;
    width: 25%;
    height: 150%;
    bottom: -60%;
    right: 20%;
    border-radius: 50%;
}
.body {
    position: absolute;
    bottom: 0%;
    left: 25%;
    width: 50%;
    height: 70%;
    background: yellow;
}
.feet {
    position: absolute;
    bottom: 0%;
    right: 25%;
    width: 20px;
    height: 30%;
    margin-bottom: -5px;
    border-radius: 80px 0% 0% 20px / 200px 0px 0px 20px;
    background: red;
    border: 5px solid white;
    border-width: 5px 0px 5px 5px;
}