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

过程解析

接下来我们通过分解绘制过程来一步步教大家完成这个作品。

猫咪脑袋

QQ截图20220915032133.png

猫咪脑袋是一个椭圆，相信老观众都会了。就是将正圆的宽度加长。这里为了看起来协调，所以我并没有用正圆去做，那样得到的会是一个椭圆，而脑袋实际上没有那么圆的。

position: relative;
width: 94px;
height: 74px;
background-color: #fff;
border: 1px solid #999;
border-radius: 40px;

猫咪眼睛

QQ截图20220915032210.png

猫咪的两个眼睛就是两个弧形，弧形是圆的一部分，我们自然而然的就想到使用圆去做。

那么怎么才能将圆变成圆弧呢？

我们分析一下，如果是一个正方形，我们只想要其中的一个边，是不是只要不给其设置背景色，然后将其中想要的那边的边框设置一个宽度以及一个颜色，就可以了。那么圆弧也是相同的道理，它只是将直线变成了带弧度的“直线”而已。

.eye {
  position: absolute;
  top: 26px;
  height: 10px;
  width: 12px;
  border-radius: 50% /  100% 100% 0 0;
  border: 3px solid #000;
  border-bottom: none;
}
.left-eye {
  left: 20%;
}
.right-eye {
  right: 20%;
}

猫咪耳朵

QQ截图20220915032228.png

猫咪耳朵是一个圆角三角形，三角形想必大家背八股文都背烂了，那圆角三角形是怎么做的呢？

其实我这边用了点 hack 手段，每只耳朵都是由一个 单个角为圆角的菱形 来充当的，那么怎么得到菱形呢？

对 CSS3 比较熟悉的小伙伴应该能想到用 skew 这个属性，将正方形按一定角度倾斜后，就可以得到一个菱形，然后设置其中的一个角为圆角，进行旋转调整角度，叠加在脑袋下层，猫咪的耳朵就绘制好啦。

QQ截图20220915033542.png

剩下的就是绘制一个三角形了，这里我用的伪元素 after ，可以发现伪元素的使用十分频繁。

.ear {
  position: absolute;
  top: -6px;
  z-index: -1;
  width: 30px;
  height: 30px;
  border: 1px solid #999;
  border-top-left-radius: 10px;
  &::after {
    content: "";
    position: absolute;
    top: -12px;
    left: -13px;
    border: 20px solid transparent;
    border-bottom-color: pink;
    transform: rotate(-45deg);
  }
}
.left-ear {
  left: 0;
  transform: rotate(-4deg) skewY(20deg);
}
.right-ear {
  right: 0;
  transform: rotate(74deg) skewY(20deg);
  &::after {
     top: -14px;
    left: -10px;
  }
}

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

更多 rotate 的用法，详见：rotate() - CSS（层叠样式表） | MDN (mozilla.org)

猫咪花纹

QQ截图20220915032238.png

猫咪的花纹是由三个圆角矩形组成的，这里我使用了一个标签外加伪元素 before 和 after 来做，相信大家都懂。

猫咪嘴巴

QQ截图20220915032345.png

猫咪嘴巴由一个下半圆+一个矩形+一个下圆弧组成，矩形和圆弧就是用上面画眼睛的画法去做，而半圆我们可以使用 border-radius: 50% / 0 0 100% 100% 去做。

这里我用的也是伪元素 before + after 。

猫咪胡须

QQ截图20220915032355.png

胡须由两个矩形组成，通过 rotate 进行旋转。

使用CSS画一只可爱的小猫咪