我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

之前画了修勾勾，怎么能少的了修毛毛呢？今天带大家从 0 到 1 的画一只猫崽子。

效果预览

思路解析

接下来带大家一步步走完整个过程。

身体

猫咪身体是一个带弧度的梯形。我们都知道半圆即长度和宽度的比值在 1:1 的情况下，设置 border-radius: 50% ，呈现的效果就是一个圆。

此时，我们将 border-radius 的 length 部分设置为 x, x, 0 0 ，就是一个上半圆，此时，如果我们将宽度变大，那么就是一个半椭圆，再不断降低圆角的百分比，我们就能得到一个上半部分为圆角的梯形。至此，猫咪的身体就画好了。

height: 80px;
width: 90px;
background-color: #163158;
border-radius: 10px 10px 50%/ 100% 100% 0px 0px;

眼睛

眼睛是由两个圆组成的，圆的绘画步骤上面说过了，不再赘述。通过定位来将眼睛放置在上方的左右两边。

嘴巴

猫咪的嘴巴是由一个矩形组成的，通过绝对定位放置在眼睛偏下一点的位置。

耳朵

原本耳朵是打算使用三角形去做，但由于猫咪的头是一个圆角梯形，看着会别扭一些，所以后面使用矩形进行skewY 变形，使之成为一个菱形，然后调整角度和脑袋契合。

关于 skewY 的更多用法，详见：skewY() - CSS: Cascading Style Sheets | MDN (mozilla.org)

尾巴

尾巴使用椭圆来做，实际上我们并不需要整个椭圆，我们需要它能形成一个弯弯的图形，作为尾巴。

为了达到这个需求，我们可以将椭圆的背景设为透明色，然后给椭圆添加边框，保留左边和下面的边框，定位到身子后面，尾巴就完成啦。

码上掘金

项目的完整代码见码上掘金：