关于前端: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

如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发哦~