萌萌粽宝陪你过端午

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

在初夏里的端午节，怎么能少的了粽子，粽子不仅可以是甜的或者是咸的，还可以是萌萌的，一个萌萌的小粽子送给大家。

萌萌的粽宝镇楼，怎么样，有没有被萌到。

萌萌的粽宝-码上掘金

萌萌的粽宝-码上掘金

下面就让我们开始一步步画一个萌萌的粽子吃。。。啊不，看吧。

粽子主体

圆滚滚的粽子主体部分主要就是靠 border-radius 来控制边框的圆角弧度，实现类似粽子的形状。

<div class="body"></div>

.body {
  display: inline-block;
  margin-top: 20px;
  width: 500px;
  height: 500px;
  border: 1px solid #333;
  border-radius: 80% 60% 30% 50%/90% 90% 50% 50%;
}

粽叶

粽叶包裹着粽子，只要画出边缘线示意即可。

这边采用绝对定位方式控制粽叶位置，相对与粽子主体定位，所以 body 需要增加 position: relative;

<div class="body">
  <div class="leaf leaf-line1"></div>
  <div class="leaf leaf-line2"></div>
</div>

.body {
  position: relative;
}
.leaf {
  position: absolute;
  border: none;
  border-bottom: 1px solid #333;
  height: 100px;
}
.leaf-line1 {
  width: 450px;
  transform: rotate(40deg);
  border-radius: 0 0 90% 50%/0 0 100% 100%;
  top: 313px;
  left: -45px;
}
.leaf-line2 {
  width: 350px;
  transform: rotate(-30deg);
  border-radius: 30%;
  top: 272px;
  right: -8px;
}

绳子

绳子使用较小高度的椭圆实现，通过绝对定位方式控制位置。

<div class="body">
  <div class="leaf leaf-line1"></div>
  <div class="leaf leaf-line2"></div>
  <div class="line"></div>
</div>

.line {
  width: 433px;
  height: 6px;
  border: 1px solid #333;
  border-radius: 50%;
  transform: rotate(-2deg) skew(60deg, 2deg);
  position: absolute;
  top: 431px;
  left: 41px;
}

绳结

绳结拆分成两个一大一小的类似水滴形状的图形，嵌套成绳结，再加两根直线作为绳头。整体通过绝对定位控制位置。

<div class="body">
  <div class="leaf leaf-line1"></div>
  <div class="leaf leaf-line2"></div>
  <div class="line"></div>
  <div class="knot">
    <div class="knot-line1"></div>
    <div class="knot-line2"></div>
    <div class="knot-line3"></div>
    <div class="knot-line4"></div>
  </div>
</div>

.knot {
  position: absolute;
  top: 361px;
  right: -63px;
  transform: rotate(112deg);
}
.knot-line1 {
  width: 100px;
  height: 50px;
  border: 1px solid #333;
  border-radius:41% 58% 0% 100% / 45% 100% 0% 61%;
  position: absolute;
  top: 0px;
  left: 0px;
}
.knot-line2 {
  width: 90px;
  height: 30px;
  border: 1px solid #333;
  border-radius: 41% 58% 0% 100% / 45% 100% 0% 61%;
  transform: rotate(12deg);
  position: absolute;
  top: 11px;
  left: 13px;
}
.knot-line3 {
  width: 1px;
  height: 60px;
  background-color: #333;
  transform: rotate(-121deg);
  position: absolute;
  top: 7px;
  left: 125px;
}
.knot-line4 {
  width: 1px;
  height: 60px;
  background-color: #333;
  transform: rotate(-145deg);
  position: absolute;
  top: -1px;
  left: 117px;
}

萌萌的小眼睛

萌萌的小眼睛就画两个椭圆就可以了，眼睛颜色深一点，使用纯黑色，整体居中。

<div class="body">
  <div class="leaf leaf-line1"></div>
  <div class="leaf leaf-line2"></div>
  <div class="line"></div>
  <div class="knot">
    <div class="knot-line1"></div>
    <div class="knot-line2"></div>
    <div class="knot-line3"></div>
    <div class="knot-line4"></div>
  </div>
  <div class="eyes">
    <div class="eye"></div>
    <div class="eye"></div>
  </div>
</div>

.eyes {
  display: flex;
  width: 110px;
  justify-content: space-between;
  margin: 100px auto 0;
}
.eye {
  width: 10px;
  height: 20px;
  border-radius: 50%;
  background-color: #000;
}

嘴巴和腮红

嘴巴用一个半圆弧线，腮红用两个红色横椭圆即可。整个脸部居中，与眼睛可以稍微近点（会比较萌）。

<div class="body">
  <div class="leaf leaf-line1"></div>
  <div class="leaf leaf-line2"></div>
  <div class="line"></div>
  <div class="knot">
    <div class="knot-line1"></div>
    <div class="knot-line2"></div>
    <div class="knot-line3"></div>
    <div class="knot-line4"></div>
  </div>
  <div class="eyes">
    <div class="eye"></div>
    <div class="eye"></div>
  </div>
  <div class="face">
    <div class="shy"></div>
    <div class="mouth"></div>
    <div class="shy"></div>
  </div>
</div>

.face {
  display: flex;
  width: 210px;
  justify-content: space-between;
  margin: 10px auto 0;
}
.shy {
  width: 20px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
}
.mouth {
  width: 30px;
  height: 10px;
  border: 1px solid black;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  border-top: none;
}

此时已经很萌了有木有。

萌萌的小手

最后再加上一双萌萌的小手，小手使用 border-radius 画成底部平整的椭圆，与 body 类似。整体上放在粽叶上即可。

<div class="body">
  <div class="leaf leaf-line1"></div>
  <div class="leaf leaf-line2"></div>
  <div class="line"></div>
  <div class="knot">
    <div class="knot-line1"></div>
    <div class="knot-line2"></div>
    <div class="knot-line3"></div>
    <div class="knot-line4"></div>
  </div>
  <div class="eyes">
    <div class="eye"></div>
    <div class="eye"></div>
  </div>
  <div class="face">
    <div class="shy"></div>
    <div class="mouth"></div>
    <div class="shy"></div>
  </div>
  <div class="hands">
    <div class="hand hand-left"></div>
    <div class="hand hand-right"></div>
  </div>
</div>

.hands {
  display: flex;
  width: 407px;
  justify-content: space-between;
  margin: 145px auto 0;
}
.hand {
  width: 10px;
  height: 20px;
  border: 1px solid #333;
}
.hand-left {
  transform: rotate(45deg);
  border-radius: 80% 60% 30% 50%/90% 90% 50% 50%;
}
.hand-right {
  transform: rotate(-45deg);
  border-radius: 80% 60% 30% 50%/90% 90% 50% 50%;
}

总结

画个萌萌的粽子后，不得不感叹 border-radius 的强大，再放一下 MDN 地址 border-radius 。