偶然间看到了 SegmentFault 上的一篇文章，感受这个 Hello Kitty 画的还不错，心血来潮也用 CSS3 画了个 Hello Kitty，如今在这里记录一下详细的绘制过程。想要源码、素材、在线演示的同窗能够直接拉到最下面。css

咱们先看下原图：html

结构分解

从上图能够看出，Hello Kitty 由脸蛋、耳朵、红色蝴蝶结、眼睛、鼻子和六根胡须构成，因此 DOM 结构也相对简单：css3

开始绘制

能够利用 Photoshop 的参考线精确的计算出元素的 left、top、width、height、border-width 以及四个角的水平 radius 值和垂直 radius 值，有误差的地方再微调一下基本就能够了。git

脸蛋

.hello-kitty-div .face {

left: 107px;

top: 77px;

width: 747px;

height: 566px;

border-top: 35px solid black;

border-bottom: 31px solid black;

border-left: 29px solid black;

border-right: 30px solid black;

border-top-left-radius: 355px 333px;

border-top-right-radius: 355px 333px;

border-bottom-left-radius: 370px 285px;

border-bottom-right-radius: 330px 255px;

background-color: white;

z-index: 100;

}

左耳

.hello-kitty-div .left-ear {

left: 112px;

top: 61px;

width: 250px;

height: 250px;

border-top: 33px solid black;

border-bottom: 30px solid black;

border-left: 28px solid black;

border-right: 30px solid black;

border-top-left-radius: 138px 100px;

border-bottom-left-radius: 334px 310px;

background-color: white;

transform: rotate(23deg);

z-index: 99;

}

让耳朵和脸蛋连为一体：github

.hello-kitty-div .left-ear-clean {

left: 146px;

top: 96px;

width: 250px;

height: 250px;

border-top-left-radius: 138px 100px;

border-bottom-left-radius: 360px 310px;

background-color: white;

transform: rotate(23deg);

z-index: 101;

}

再稍加点缀，美化一下：segmentfault

.hello-kitty-div .left-ear-beautify {

left: 149px;

top: 221px;

width: 60px;

height: 30px;

border-top-left-radius: 20px 15px;

border-top-right-radius: 25px 15px;

border-bottom-left-radius: 20px 15px;

border-bottom-right-radius: 25px 15px;

background-color: black;

transform: rotate(-52deg);

z-index: 102;

}

右耳

.hello-kitty-div .right-ear {

left: 600px;

top: 50px;

width: 250px;

height: 250px;

border-top: 33px solid black;

border-bottom: 28px solid black;

border-left: 30px solid black;

border-right: 29px solid black;

border-top-left-radius: 220px 170px;

border-top-right-radius: 90px 57px;

border-bottom-right-radius: 334px 245px;

background-color: white;

transform: rotate(-21deg);

z-index: 99;

}

.hello-kitty-div .right-ear-clean {

left: 700px;

top: 105px;

width: 120px;

height: 120px;

background-color: white;

z-index: 101;

}

右耳画的比较粗糙，由于立刻就要画蝴蝶结了。ide

蝴蝶结

蝴蝶结分为两个外边，三个圆。外边是整个绘画过程当中最难画的地方，用矩形调整 radius 参数很难作到没有误差，由于它不像是更圆润的矩形，而像是更圆润的三角形。在这里，咱们把它分红四块，各个外边各两块，在块内绘制好对应的区域，再利用 overflow: hidden; 来隐藏多余的部分。而后是三个圆，相对简单。3d

代码量实在太多，就不贴出来了，大概思路就这样子。code

眼睛，鼻子

眼睛和鼻子相对简单，就不贴代码了。orm

胡须

由于胡须是弯弯的，因此每根胡须须要两个元素来实现，咱们就用 :before 和 :after 吧。

某一根胡须的代码：

.hello-kitty-div .left-moustache-1:before {

content: '\20';

display: block;

position: absolute;

left: 20px;

top: 420px;

width: 100px;

height: 24px;

border-top-left-radius: 80px 30px;

border-bottom-left-radius: 20px;

background-color: black;

transform: rotate(-5deg);

z-index: 101;

}

.hello-kitty-div .left-moustache-1:after {

content: '\20';

display: block;

position: absolute;

left: 131px;

top: 418px;

width: 60px;

height: 24px;

border-top-right-radius: 100px 30px;

border-bottom-right-radius: 20px;

background-color: black;

transform: rotate(2deg);

z-index: 101;

}

如今，整个 Hello Kitty 就画完了，有没有以为很可爱？~~(ฅ>ω

最后