css绘制一个Pinia小菠萝

效果如下：

pinia小菠萝分为头部和身体，头部三片叶子，菠萝为身体

头部

先绘制头部的盒子，将三片叶子至于头部盒子中
先绘制中间的叶子，利用border-radius实现叶子的效果，可以借助工具来快速实现圆角的预想效果

https://9elements.github.io/fancy-border-radius/

<div class="center_lafe"></div>

.center_lafe{
 width: 100px;
 height: 200px;
 background: linear-gradient(-130deg,#61d572,#52ce63);
 border-radius: 50% 50% 50% 50% / 100% 100% 0% 0% ;
 &::before{
 content: '';
 width: 100px;
 height: 200px;
 position: absolute;
 border-radius: 50% 50% 50% 50% / 100% 100% 0% 0% ;
 background: linear-gradient(-180deg,rgba(255,255,255,0.2) 30%,transparent);
 }
}

再绘制两侧的叶子，方法和绘制中间的叶子一样

<div class="left_lafe"></div>
<div class="right_lafe"></div>

.left_lafe{
 width: 100px;
 height: 100px;
 background: linear-gradient(-130deg,#86e798,#52ce63);
 border-radius: 5% 95% 50% 50% / 5% 50% 50% 95% ;
 position: absolute;
 left: 50px;
 bottom: -16px;
 transform: rotate(5deg);
}
.right_lafe{
 width: 100px;
 height: 100px;
 background: linear-gradient(-130deg,#86e798,#52ce63);
 border-radius: 95% 5% 50% 50% / 50% 5% 95% 50% ;
 position: absolute;
 right: 20px;
 bottom: -30px;
 transform: rotate(5deg);
}

两篇叶子的层级在中间叶子和菠萝身体之下，所以两片叶子的被覆盖的地方有一层阴影用来表示层级，阴影用伪元素配合渐变实现，下面是左侧叶子的阴影：绘制一个和左侧叶子一样的形状，利用渐变和颜色透明度实现

.left_lafe::before{
 content: '';
 width: 100px;
 height: 100px;
 position: absolute;
 border-radius: 5% 95% 50% 50% / 5% 50% 50% 95% ;
 background: linear-gradient(-25deg,rgba(51, 51, 51,0.3),transparent);
}

右侧叶子同理，看一下头部叶子的整体效果：

身体

开始绘制小菠萝身体部分
身体部分利用border-radius实现，身体部分的层级高于叶子

<div class="piniaBody"></div>

.piniaBody{
 width: 300px;
 height: 320px;
 background: #ccc;
 border-radius: 50% 50% 48% 48% / 65% 65% 38% 38% ;
 background: linear-gradient(to bottom,#ffe56c,#ffc73b);
 margin-top: -20px;
 z-index: 10;
 position: relative;
}

额头

绘制额头上的X图案，其实就是绘制一侧的斜线，另一侧同样的写法，更改位置和角度即可。

 <div class="forehead"></div>

.forehead{
 width: 70px;
 height: 70px;
 position: absolute;
 left: 50%;
 top: 30px;
 transform: translate(-50%);
 &::before,&::after{
 content: '';
 width: 100%;
 height: 8px;
 position: absolute;
 background: #ffc73b;
 border-radius: 6px;
 left: 45%;
 top: 40%;
 transform: translateX(-50%) rotate(50deg);
 }
 &::after{
 content: '';
 left: 55%;
 top: 40%;
 transform: translateX(-50%) rotate(-50deg);
 }
}

眼睛

眼睛部分利用三个圆形分别堆叠即可，分别是眼白、黑眼球、高光

<div class="left_eyesBox"></div>

.left_eyesBox{
 width: 50px;
 height: 50px;
 background: #fff;
 border-radius: 50%;
 position: relative;
 &::before{
 content: '';
 position: absolute;
 width: 30px;
 height: 30px;
 background: black;
 border-radius: 50%;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
 }
 &::after{
 content: '';
 width: 12px;
 height: 12px;
 background: #fff;
 border-radius: 50%;
 position: absolute;
 left: 25%;
 top: 35%;
 }
}

眼睛下面有一个眼影，这里新建一个div，圆角50%，层级在眼睛之下。

<div class="eyeshadow"></div>

.eyeshadow{
 width: 40px;
 height: 20px;
 background: #eaadcc;
 position: relative;
 top: 40px;
 left: -10px;
 z-index: -1;
 border-radius: 50%;
}

右眼的写法和左眼一致，把左眼拿过来更改一下位置即可。

嘴巴

嘴巴部分：先绘制一个椭圆，椭圆的背景色为透明色，给椭圆设置阴影，阴影向下偏移5px，只保留阴影的颜色就可以得到嘴巴的效果了

<div class="mouth"></div>

.mouth{
 width: 40px;
 height: 20px;
 position: absolute;
 left: 50%;
 bottom: 20px;
 border-radius: 50%;
 transform: translate(-50%) scale(1);
 box-shadow: 0px 5px 0px 0px black;
}

底部

小菠萝底部的X图案跟额头的X图案绘制方法大致相同，例如：左侧横线旋转45deg，右侧横线旋转-45deg，即可得到一个交叉的X，width就是横线的长度，调整左右侧横线长度的比例即可得到不规则的X图案，剩下的只需要调整斜线的位置和比例即可，左右的X图案绘制方法是一样的。

<div class="left_jaw"></div>
<div class="right_jaw"></div>

.left_jaw,.right_jaw{
 width: 90px;
 height: 70px;
 position: absolute;
 bottom: 40px;
 &::before{
 content: '';
 width: 100%;
 height: 8px;
 position: absolute;
 background: #ecb732;
 border-radius: 6px;
 left: 45%;
 top: 40%;
 transform: translateX(-50%) rotate(50deg);
 }
 &::after{
 content: '';
 width: 100%;
 height: 8px;
 position: absolute;
 background: #ecb732;
 border-radius: 6px;
 left: 55%;
 top: 40%;
 transform: translateX(-50%) rotate(-50deg);
 }
}
.left_jaw{
 left: 30px;
 &::after{
 width: 70%;
 }
}
.right_jaw{
 right: 30px;
 &::before{
 width: 70%;
 }
}

到这里我们的小菠萝就绘制完成了
最后看一下官网的原图：

技巧总结：

1、利用border-radius绘制大部分不规则的椭圆
2、高光利用背景色和层级叠加实现
3、不规则的交叉图案使用translate调整旋转位置
4、元素的层级表现利用线性渐变和颜色透明度来实现
5、利用z-index调整画面层级表现

案例源码：https://gitee.com/wang_fan_w/css-diary

如果觉得这篇文章对你有帮助，欢迎点赞、收藏、转发哦~