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

柚子

引言

又到了 柚子 成熟的季节，属实好吃的一批。

这里直接用 css 来实现一个 柚子

先发一个理想效果图

不得不说理想图，确实好看

再看下我实现的 效果图🤣

也就差了一丢丢吧🤣，不过还好，能看出来是个 柚子

实现

1.柚子本身

首先实现 柚子 本身，这一块很简单，通过添加 border-radius 以及 向内的阴影 box-shadow 即可实现。

<div class="youzi"></div>

display: block;
width: 326px;
height: 380px;
background-color: #f9df30;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
box-shadow: inset -48px -48px #f0cd32;
position: relative;

2.打光

打光这一块，就需要通过 绝对定位 来实现了。但是需要注意的是，若遇到不规则图形，就要需要借助 伪元素 来进行处理了

• 第一处补光

  由于不太好弄，这里通过两个 伪元素 协助处理

  <div class="youzi">
      <div class="w1"> </div>
  </div>
  
  .w1 {
    position: absolute;
    left: 60px;
    top: 50px;
    width: 80px;
    height: 160px;
    border-radius: 100px 30px 24px 90px;
    transform: rotate(25deg);
    background: #fff;
    &:before {
      content: '';
      position: absolute;
      top: 30px;
      left: -2px;
      width: 80px;
      height: 100px;
      background: #fff;
      border-radius: 40%;
    }
    &::after {
      content: '';
      position: absolute;
      bottom: 1px;
      right: -79px;
      width: 100px;
      height: 150px;
      background: #f9df30;
      border-radius: 50%;
    }
  }
  

• 第二处补光

  相较于第一处补光，第二处的补光，只需要处理 border-radius 即可

  <div class="youzi">
      <div class="w2"> </div>
  </div>
   
  .w2 {
    position: absolute;
    left: 60px;
    top: 250px;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: #fff;
  }
  

3.叶子

叶子实现起来是真的难顶

由三部分组成，从上往下，从左往右依次是：

• 叶子的根部

• 叶子的核心

• 叶子的花纹

叶子

这里将下 叶子的核心 部分，

周围的 厚的深色 部分，使用 border 来实现

而 浅色的 内容区域，主要通过设置 border-radius: 0% 100%; 来得到该形状

代码如下：

  position: absolute;
  left: 120px;
  top: -80px;
  width: 260px;
  height: 160px;
  border-radius: 0% 100%;
  background: #3d7936;
  border: 20px solid #2d5727;
  z-index: 99;

最终的代码，我放到 码上掘金 了

code.juejin.cn/pen/7146211…

总结

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

主要是 定位、box-shadow、border、border-radius、transform 的使用。