前言

今天我们来从 0 到 1 来画一只小鸡，这个小鸡也是我的耳机套的样子，只不过它刚到家手就快掉了，我也懒得去换。如果我用css给它复原一下昔日光彩。

步骤分解

小鸡身体/脑袋

小鸡的身体兼脑袋就是个圆角矩形啦，通过 border-radius 设置圆角属性。相信聪明的小伙伴们闭着眼睛都会写啦。

小鸡冠

鸡冠长得跟葱似的。

它是由两个圆角矩形 叠加 组成的。这里我通过一个 div 标签，通过伪元素 before 和 after 搭配 border-radius 来制作两个圆角矩形，最后通过将它们各自旋转，得到一个大葱，啊不，得到一个鸡冠。

.head {
  position: absolute;
  left: 36%;
  top: -34px;
  z-index: -1;
  &::before {
    position: absolute;
    content: "";
    width: 22px;
    height: 46px;
    border-radius: 10px;
    transform: rotate(-26deg);
    background-color: green;
  }
  &::after {
    position: absolute;
    content: "";
    width: 12px;
    height: 36px;
    border-radius: 10px;
    transform: rotate(26deg) translateX(20px);
    background-color: green;
  }
}

小鸡眼睛

小鸡的眼睛由两个椭圆组成，圆相比大家都会画吧？长宽相等的矩形设置 border-radius: 50% 就是一个正圆了，我们只要让宽高不同，得到的就是椭圆啦。

鸡喙

圆圆方方的，想必大家也猜出来了：圆角正方形。

对没错，就是圆角正方形通过 rotate 旋转得到的。

.mouth {
  position: absolute;
  top: 48px;
  left: 50%;
  height: 30px;
  width: 30px;
  border: @public-border;
  border-radius: 4px 20px 20px 20px/ 5px;
  background-color: @public-color;
  transform: rotate(45deg) translateX(-27px);
}

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

小鸡爪子

小鸡的手我们用的方法和鸡冠是一样的，也是两个圆角矩形，需要注意的是，通过绝对定位到指定的位置后，由于 .body 和 .hand 的 z-index 是相同的，因此 .hand 会盖在 .body 之上，因此我们需要设置 .hand 的 z-index: -1。

小鸡 jio

小鸡 jio 是由单个圆角正方形组成的，我这里是用了一个标签，前后通过伪元素 before 和 after 来拼接另外两个圆角矩形。

.leg {
  bottom: -10px;
  &,&::before,&::after {
    position: absolute;
    height: 8px;
    width: 8px;
    background-color: @public-color;
    border: @public-border;
    border-radius: 3px;
  }
  &::before {
    content: "";
    left: -10px;
    top: -1px;
  }
  &::after {
    content: "";
    left: 8px;
    top: -1px;
  }
}
.left-leg {
  left: 20%;
}
.right-leg {
  right: 20%;
}

小鸡背包

小鸡背包由两个部分组成：背带+包。

那么背带怎么做呢？我们观察可以发现背带就是个圆弧，老观众应该都晓得了，圆弧的处理就是将背景透明的半圆外加带色边框组成的。

transform: rotate(10deg);
height: 20px;
width: 100%;
border-bottom: 8px solid @public-color;
border-radius: 50% / 0 0 100% 100%;

可以看到，这里我是使用了 border-bottom 来充当背带的角色。

背带有了，没有包怎么行呢？

背包就是一个圆角矩形定位的，眼睛部分和小鸡眼睛是一个原理，唯一不同的是背包的眼睛下面带了红霞，这里我是使用伪元素 after （对，又是伪元素）来做的，将伪元素的 content 属性值设置为 /// ，因为有些偏移，需要在 原本位置 的基础上，向左移一点，这个场景使用相对定位非常合适了。

至此，我们的背带小鸡就完成了。