CSS3绘图

HTML

<div class="tmall">
    <div class="ear"> <span class="earl"></span> <span class="earm"></span> <span class="earr"></span> </div>
    <div class="face"> <span class="eyel"></span> <span class="eyer"></span> <span class="mouthl"></span> <span class="mouthr"></span> </div>
    <div class="bodytop"></div>
    <div class="bodybottom"></div>
</div>
<div class="text">CSS 3 天猫 logo</div>
					    

CSS

* {
    margin: 0;
    padding: 0;
}
.tmall {
    width: 400px;
    height: 400px;
    position:relative;
    margin:6px;
}
.ear {
    width: 100%;
    height: 15%;
    position: relative;
}/*耳朵容器*/
.earl {/*左耳*/
    width: 18%;
    height: 100%;
    position: relative;
    display: inline-block;
    border-top-left-radius: 20% 30%;/*耳朵弧度圆角实现*/
    border-top-right-radius: 80% 100%;
    background: black;
    z-index: 0;
}
.earl:after {/*左耳朵的伪对象*/
    content: '';
    width: 450%;
    height: 72%;
    position: absolute;
    left: 84%;
    bottom: 0;
    background: black;/*一块黑色的区域供耳朵中间容器遮盖*/
}
.earr {/*右耳*/
    width: 18%;
    height: 100%;
    position: absolute;
    display: inline-block;
    right: 0;
    border-top-right-radius: 20% 30%;/*耳朵弧度圆角实现*/
    border-top-left-radius: 80% 100%;
    background: black;
    z-index: 0;
}
.earm {/*耳朵中间的遮盖层*/
    width: 76%;
    height: 100%;
    position: absolute;
    display: inline-block;
    left: 12%;
    bottom: 3%;
    border-bottom-left-radius: 50% 100%;/*设置弧度*/
    border-bottom-right-radius: 50% 100%;/*遮盖不到的地方为左耳伪对象的黑色部分*/
    z-index: 1;
    background: #fff;
    border-bottom: none;
}
.face {
    width: 100%;
    height: 25%;/*脸部*/
    position: relative;
    background: black;
    border-bottom-left-radius: 10% 10%;/*下方圆角*/
    border-bottom-right-radius: 10% 10%;
}
.eyel {/*左眼白眼球*/
    width: 20%;
    height: 80%;
    position: absolute;
    left: 5%;
    border-radius: 100%;/*圆形*/
    background: white;
    z-index: 1;
}
.eyel:after {/*左眼黑眼球*/
    content: '';
    width: 20%;
    height: 100%;/*椭圆形*/
    position: absolute;
    left: 40%;
    border-radius: 100%;
    background: black;
    z-index: 1;
}
.eyer {/*右眼白眼球*/
    width: 20%;
    height: 80%;
    position: absolute;
    right: 5%;
    border-radius: 100%;
    background: white;
    z-index: 1;
}
.eyer:after {/*右眼黑眼球*/
    content: '';
    width: 20%;
    height: 100%;
    position: absolute;
    left: 40%;
    border-radius: 100%;
    background: black;
    z-index: 1;
}
.face:after {/*鼻子*/
    content: '';
    position: absolute;
    border-top: 1em solid white;
    border-bottom: 1em solid transparent;
    border-left: 1em solid transparent;
    border-right: 1em solid transparent;
    border-radius: 38%;
    z-index: 0;
    left: 46.5%;
    top: 30%;
}
.mouthl {/*嘴的左部分*/
    width: 10%;
    height: 25%;
    position: absolute;
    left: 40%;
    top: 50%;
    border-radius: 100%;/*圆角*/
    border-bottom: 0.4em solid white;/*只用下边框*/
    z-index: 1;
}
.mouthr {/*嘴的右部分*/
    width: 10%;
    height: 25%;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 100%;
    border-bottom: 0.4em solid white;
    z-index: 1;
}
.bodytop {
    width: 20%;
    height: 25%;
    position: relative;
    left: 40%;
    background: black;
}
.bodybottom {
    width: 20%;
    height: 25%;
    position: relative;
    left: 40%;
    background: black;
}
.bodytop:before {
    position: absolute;
    width: 50%;
    content: '';
    border-top: 0 solid transparent;
    border-bottom: 1.5em solid black;
    border-left: 6em solid transparent;
    border-right: 0 solid transparent;
    right: 42%;
    top: 73%;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
.bodytop:after {
    position: absolute;
    left: 42%;
    top: 73%;
    width: 50%;
    content: '';
    border-top: 0 solid transparent;
    border-bottom: 1.5em solid black;
    border-left: 0 solid transparent;
    border-right: 6em solid transparent;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
}
.bodybottom:before {
    position: absolute;
    width: 50%;
    content: '';
    border-top: 0;
    border-bottom: 4em solid transparent;
    border-left: 1em solid black;
    border-right: 0;
    left: 0;
    top: 100%;
}
.bodybottom:after {
    position: absolute;
    width: 50%;
    content: '';
    border-top: 0;
    border-bottom: 4em solid transparent;
    border-right: 1em solid black;
    border-left: 0;
    right: 0;
    top: 100%;
}
.text {
    width: 200px;
    margin: 20px auto;
}