CSS实现一个猕猴桃和它的小姑娘

前言

这我能错过吗，我必不能。

我就冥思苦想这个创意啊，头发掉了好几根（一根5块），这个时候公司群里突然传来一声：

好的，就它了！

不过由于本人水平有限，难以还原真实猕猴桃。。。于是火速上iconfont找了个全站最帅猕猴桃！

没错，就是它！

开始还原

首先，先把代码给各位老爷过一眼：

1. HTML结构

HTML结构包括猕猴桃主体、猕猴桃上下的两个揪揪、两只眼睛、嘴、左右两个脸颊、猕猴桃小姑娘（至于它为什么是小姑娘，而不是小伙子，，，是因为我乐意）。

猕猴桃身上的一些主要元素都是通过 i 标签给相应的样式实现的，具体实现见CSS部分。

2. CSS实现

2.1 猕猴桃主体

猕猴桃主体的css样式：宽高、背景色、边框和圆角。

【注：猕猴桃的胖瘦取决于它的宽高】

2.2 猕猴桃上下两个小揪揪

猕猴桃上下两个小揪揪的css样式：宽高、背景色、边框和圆角，以及位置。通过调整揪揪的位置去压住猕猴桃主体的边框，展示成两个揪揪和主体是一体的。

2.3 猕猴桃的两只眼睛

猕猴桃的两只眼睛的css样式：宽高、背景色和圆角，以及位置。

2.4 猕猴桃的嘴

猕猴桃的嘴的css样式：宽高、边框和圆角，以及位置。

2.5 猕猴桃的脸颊

猕猴桃的两个脸颊的css样式：宽高、背景色和圆角，以及位置。

【注：看到这里，大猕猴桃就画好了！】

2.6 猕猴桃小姑娘

1. 首先画一下小姑娘的底色：

• 这部分主要是通过对一个宽高比为 1 : 2 的矩形做调整，样式给一下圆角，形成一个半圆形，而后旋转角度并调整其位置，使其无缝贴合到大猕猴桃的脸上。

• 不得不说，这个小猕猴桃的底色往这一放，我就想起了当初被智齿支配的恐惧 ，它就像我的智齿撑肿我帅气的脸庞一样，撑肿了大猕猴桃的脸。

1. 然后开始画猕猴桃小姑娘的美丽容颜：

• 小姑娘的css样式：宽高、背景色、边框和圆角，以及位置。
• 没错，猕猴桃小姑娘是个小绿脸 🤢，因为它是猕猴桃 🥝。

1. 然后画出它的果核：

• 果核的css样式：宽高、背景色和圆角，以及位置。

1. 最后画出黑色的小种子：

• 黑色小种子的css样式：宽高、背景色、边框和圆角，以及位置。
• 这部分主要是通过给一个圆以黑色点状边框，形成小猕猴桃的黑色小种子。

结束感言

👏👏👏

恭喜我！

到这里！

一个猕猴桃和它的小姑娘就画好了！

一个摸鱼好手牺牲了自己的摸鱼时间！

为css世界又贡献了一大一小两个猕猴桃！

Over.