使用css绘制一个简单的粽子

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

先来看看效果图

基础结构

<div class="box">
  <div class="eye"></div>
  <div class="eye eye-right"></div>
  <div class="month"></div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: linear-gradient(to top, #f5efef, #f5bab1);
  margin: 0;
  padding: 0;
}

粽子的基础结构非常的简单

元素	说明
div.box	粽子主体
div.eye	左眼
div.eye.eye-right	右眼
div.month	嘴

css样式

我们需要实现一个粽子，那么就需要完成有一个粽子形状的css容器

这也就意味着div.box是一个不规则图像，我这里使用了box-radius + div的方式来实现

.box {
  width: 320px;
  height: 320px;
  background: #fbf8f2;
  border-radius: 53% 47% 51% 49% / 86% 85% 15% 14%;
  border: 6px solid #78664f;
  overflow: hidden;
  position: relative;
}

接下来，我们就需要去完成对应的粽子外衣，为了实现层叠效果，我们就需要使用定位和z-index属性

而这两片粽叶很明显可以写成div.box的before伪元素和after伪元素

因为我们设置了div.box的溢出隐藏，那么我们只需要加上对应的矩形，然后进行一定角度的旋转即可

移除的部分会被自动裁剪

.box::after {
  content: '';
  width: 200px;
  height: 240px;
  background-color: #95cfa0;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 20%;
  border: 4px solid #78664f;
  transform: rotate(50deg);
}

.box::before {
  content: '';
  position: absolute;
  top: 65%;
  left: -25%;
  z-index: 200;
  width: 375px;
  height: 240px;
  background-color: #95cfa0;
  border: 4px solid #78664f;
  transform: rotate(23deg);
}

对于眼睛部分就很简单了，无非就是两个圆形的div里面还有两个圆形的div元

.eye {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #77614d;
  position: absolute;
  top: 15%;
  left: 30%;
}

.eye-right {
  left: 55%;
  right: 30%;
}

.eye::before {
  content: '';
  width: 40%;
  height: 40%;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 10%;
}

对于嘴巴部分，嘴巴是一个有弧度的曲线，最好的解决方法是创建一个圆形的透明的div容器，然后给对应的容器下阴影就可以实现弧度的功能了

.month {
  width: 45px;
  height: 45px;
  position: absolute;
  top: 35%;
  left: 43%;
  border-radius: 45%;
  box-shadow: 0 2px #77614d;
}

完整代码如下

掘金代码片段