端午节用 css 做了个疑似粽子，结果哭了

“这是我参与更文挑战的第14天，活动详情查看：更文挑战”

折腾不止

端午节吃粽子是传统。放假在家，魔都下起了大雨，起了个心思，如果用 css 做个可爱的粽子，是不是比较有趣，然后又做梦骗点赞100+。

于是开始行动，参考的图和预想做出来的的粽子是这样的。

本来以为是个很简单的过程，但中间折腾了好久，做出来的效果快把自己丑哭了。

中间效果就不放出来了，以免大家一起哭。中途一度想到了放弃~但放弃后，又不舍，重新捡起来后又把自己丑哭了。

几度轮回，只能骂自己怎么会想出这种馊点子。

最后耗尽假期的剩余一点耐心，结果呈现如下，不像粽子的粽子。祝朋友们端午安康。

预览效果如下：

最终的结论是别轻易开脑洞用 css 画没有设计稿的东东，否则哭还是小事，重要的既暴露自己的审丑，还会暴露自己智商。

以下为端午节的『粽子』的制作流程，原创不易，感谢 xdjm 们，走过路过点个赞。

粽子绘制过程

基础结构+肉粽身体

首先搭建基础结构：

<div class="wrapper">
  <div class="body"></div>
  <div class="hat"></div>
  <div class="mouse"></div>
</div>
复制代码

初始 css 如下：

/* 变量 */
:root {
  --body-size: 50vw;
}    

/* 容器居中 */
.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 肉粽身体 */
.body {
  width: var(--body-size);
  height: 0;
  padding-top: calc(var(--body-size) * .875);
  background-color: #fae8d0;
  border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
  background-color: #fae8d0;
  transform: rotate(90deg);
}
复制代码

预览效果如下：

如何绘制一个带圆角+圆滑曲线的三角形肉粽，搜索和尝试了很久，一直没有找到一个好的纯 css 实现方式。只能尝试画了如此一个略微有点像粽子的形状。

不知道朋友们有不有什么好的方法噢。

帽子

新增以下 css 样式：

/* 变量 */
:root {
  --hat-size: 20vw;
}    

/* 帽子样式 */
.hat {
  position: absolute;
  top: -70%;
  width: 0;
  z-index: 8;
  height: 0;
  border: calc(var(--hat-size)) solid transparent;
  border-bottom: calc(var(--hat-size)) solid #61c661;
  border-radius: 5%;
  transform: rotate(353deg);
}
复制代码

预览效果如下：

眼睛+嘴巴

新增 css 效果：

/* 变量 */
:root {
  --mouse-size: 10vw;
}    


/* 嘴巴 */
.mouse {
   position: absolute;
   top: 15%;
   left: 50%;
   width: var(--mouse-size);
   height: calc(var(--mouse-size) * 2);
   border-radius: 50%;
   border: calc(var(--mouse-size) * 0.1) solid transparent;
   z-index: 5;
   border-bottom: calc(var(--mouse-size) * 0.1) solid #ab8b07;
   border-bottom: calc(var(--mouse-size) * 0.1) solid #edd2b5;
   margin-left: calc(var(--mouse-size) * -0.5);
}

/* 眼睛 */
.mouse::before, .mouse::after{
  display: block;
  content: " ";
  position: absolute;
  top: 50px;
  width: calc(var(--mouse-size) * 0.25);
  height: calc(var(--mouse-size) * 0.25);
  border-radius: 50%;
  z-index: 5;
  background: #e7bf91;
}

/* 左眼 */
.mouse::before {
  left: calc(var(--mouse-size) * -.25);
}

/* 右眼 */
.mouse::after {
  right: calc(var(--mouse-size) * -.25);
}
复制代码

预览效果如下：

阴影

新增 .shadow div：

<div class="wrapper">
  <div class="body"></div>
  <div class="hat"></div>
  <div class="mouse"></div>
  <div class="shadow"></div>
</div>
复制代码

新增 css 效果：

/* 变量 */
:root {
  --shadow-size: 38vw;
}   

.shadow {
    position: absolute;
    left: 50%;
    top: 110%;
    margin-left: calc(var(--shadow-size) * -0.5);
    width: var(--shadow-size);
    height: calc(var(--shadow-size) * 0.15);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    z-index: -1;
}

复制代码

预览效果如下：

手和脚

新增手脚 dom 结构：

<div class="wrapper">
  ...
  <div class="hand leftHand"></div>
  <div class="hand rightHand"></div>
</div>
复制代码

新增 css 效果：

/* 变量 */
:root {  
  --foot-size: 1vw;
  --hand-size: 1vw;
  --foot-color: #edd2d5;
  --hand-color: #edd2d5;
}    

/* 脚容器 */
.foot {
    position: absolute;
    left: 50%;
    top: 100%;
    width: 0;
}

/* 左右脚样式 */
.foot::before, .foot::after {
    display: block;
    content: " ";
    position: absolute;
    top: 0;
    width: calc(var(--foot-size));
    height: calc(var(--foot-size) * 8);
    border-left: 2px solid var(--foot-color);
    border-bottom: 2px solid var(--foot-color);
}

/* 右脚样式 */
.foot::before {
    left: calc(var(--foot-size) * 2.5);
}
/* 左脚样式 */
.foot::after {
    right: calc(var(--foot-size) * 2.5);
    transform: rotate(23deg);
}
/* 手 */
.hand {
    display: block;
    content: " ";
    position: absolute;
}
/* 左手 */
.leftHand {
    top: 62%;
    left: 2%;
    width: calc(var(--hand-size));
    height: calc(var(--hand-size) * 8);
    border-left: 2px solid var(--hand-color);
    border-bottom: 2px solid var(--hand-color);
    transform: rotate(324deg);
}
/* 右手 */
.rightHand {
    top: 62%;
    right: 2%;
    width: calc(var(--hand-size));
    height: calc(var(--hand-size) * 8);
    border-right: 2px solid var(--hand-color);
    border-bottom: 2px solid var(--hand-color);
    transform: rotate(24deg);
}
复制代码