用CSS 实现多片树叶 [动画演示] [#7持续更新中.....]

题目图案

本文是 #7 Leafy Trail，实现多片树叶。

主要使用的属性是:

1. flex
2. border-radius
3. box-shadow

CSSBattle 是一个使用 HTML 和 CSS 实现指定图案，并进行实时预览和对比的网站。具有很强的趣味性和游戏性。
我仅仅选择实现 ~100%的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名.
很多减少代码数的 trick，在日常工作实践中，都是不值得提倡的。

解决方案动画演示

解决方案步骤

主要解决思路就是使用border-radius把左上和右下的角弯曲，然后再用box-shadow向左复制另外的 2 片叶子。