“这是我参与更文挑战的第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);
}
预览效果如下：
感谢
完整的代码见 codepen 示例，css 粽子。
感谢善良的你看到最后。
