使用CSS3代码绘制可爱的Hello Kitty猫

CSS Code复制内容到剪贴板

.hello-kitty-div .rightright-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-rightright-radius: 90px 57px;
    border-bottom-rightright-radius: 334px 245px;
    background-color: white;
    transform: rotate(-21deg);
    z-index: 99;
}
.hello-kitty-div .rightright-ear-clean {
    left: 700px;
    top: 105px;
    width: 120px;
    height: 120px;
    background-color: white;
    z-index: 101;
}

右耳画的比较粗糙，因为马上就要画蝴蝶结了。

蝴蝶结

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

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