我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

柚子

引言

今天本想偷懒，但是有人想看 红心柚子

必须安排！

首先找个 卡通 的 红心柚子，如下图，嗯，感觉还不错！

而我实现的效果，尽量靠拢🤣

实现

可以看到今天整体图 相较于 昨天的 柚子来说不太难。

但是也有一些重要的知识点，例如半圆，我采用 clip 的方式来进行切割。

1.左侧叶子

这里直接说左侧叶子，如何实现

直接通过设置 border-radius: 0% 100%; 的方式，来将其变成类似椭圆形！

    .yezi {
      position: absolute;
      top: -4px;
      left: -10px;
      width: 120px;
      height: 100px;
      background: #61ca88;
      border-radius: 0% 100%;
      transform: rotate(105deg);
    }

2.左侧叶尾

主要是 圆 的一半，再通过设置其中一部分 border 即可得到

    .genbu {
      position: absolute;
      top: -22px;
      left: 25px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 2px solid transparent;
      border-top: 2px solid #50bb75;
      transform: rotate(50deg);
    }

3.右侧

最主要的就是右侧的 红心柚子 部分，首先映入眼帘的就是一个半圆，加上周围一层红的 border 外边框

如何实现半圆，我这里，采用的 clip 的方式进行裁剪，

之后，对内部的 红心柚子 通过 绝对定位 的一个方式，来分布在柚子周围

但 红心柚子，又是一个 圆锥扇形，还是蛮复杂的。

最后在 红心柚子 的上方，再来一个 小圆 进行覆盖即可。

    .hongyou {
      position: absolute;
      bottom: 33px;
      right: -130px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      clip: rect(100px 200px 200px 0px);
      background: #ffed9b;
      border: 3px solid red;
      z-index: 9;
    }

每个 红柚子块 的代码，放到 码上掘金 了

code.juejin.cn/pen/7146498…

4.阴影

本以为阴影很简单，但是发现 阴影遇到 clip，出现奇怪的效果，根本做不到阴影。

最后只能通过在 左侧柚子 内部，再设置一个半圆的方法来实现。

好了

这看似是一个很好的方法，但是发现超出的部分，如果将父元素 overflow：hidden，会发现，叶子会消失。

此时，只能在柚子内部，再设置一个 子的 div ，用这个 子的 div 用来设置 overflow：hidden 即可解决

    .youzi2 {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      position: absolute;
      overflow: hidden;
      &::before {
        content: '';
        position: absolute;
        bottom: 31px;
        right: -30px;
        width: 200px;
        height: 230px;
        border-radius: 50%;
        clip: rect(100px 200px 230px 0px);
        background: #fb9c0e;
        z-index: 1;
      }
    }

总结

这里用到了 很多 css 的样式 知识点

尤其是遇到问题时，转换思路的重要性，以及感觉用 clip 处理 半圆 效果时，不是最优方案！