五叶草

山人

马老师用单元素制作过三叶草，很给力。单元素画五叶草就力不从心了，这需要多元素。设想是这样：一个包裹叶片的母元素+五个子元素，母元素将子元素包裹起来，其高宽是子元素高宽的两倍（子元素高宽一致）。

母元素CSS代码，很简单，不解释：

#mama {

margin: 50px auto 0;

position: relative;

width: 200px;

height: 200px;

}

子元素首先需要一个通用属性设置，CSS代码如下：

.petal {

position: absolute;

width: 100px;

height: 100px;

background: darkgreen;

transform-origin: 100% 100%;

border-radius: 0% 100%;

box-shadow: 2px 2px 20px #000;

}

需要理解的是转换基点transform-origin，根据border-radius的设定，应设置在右下角。

然后每一个叶片，旋转不同的角度，五个叶片，平均每一个叶片占 360/5=72（度），需要给它们一一设置：

.p1 { transform: rotate(0deg); }

.p2 { transform: rotate(70deg); }

.p3 { transform: rotate(140deg); }

.p4 { transform: rotate(210deg); }

.p5 { transform: rotate(280deg); }

最后是HTML代码：

<div id="mama">

<span class="petal p1"></span>

<span class="petal p2"></span>

<span class="petal p3"></span>

<span class="petal p4"></span>

<span class="petal p5"></span>

</div>

看看效果：

山人

改变子元素通用属性设置的 border-radius 值，会得到不同的叶片形状。下面的border-radius值为 0 50%

红影

漂亮。这个直接用了整数70度，到最后也看不出来呢

山人

红影 发表于 2022-11-30 10:18
漂亮。这个直接用了整数70度，到最后也看不出来呢

两度的差距肉眼基本看不出

山人

换个线性渐变，叶片更像一些：

山人

黄金叶也能生产：

山人

黄金叶的线性渐变角度减少或增加一点点，两度吧，这样叶片看上去是凹感，不然可能是凸感。前面的色差不大的渐变45度就好。

山人

红影

山人 发表于 2022-11-30 10:21
两度的差距肉眼基本看不出

到最后的那片都累积到10度了啊，不过也还好，基本看不出的。

红影

加了渐变更漂亮

樵歌

在山中修炼，大有超越马黑仙术趋势，也。

小辣椒

樵歌 发表于 2022-11-30 20:30
在山中修炼，大有超越马黑仙术趋势，也。

樵哥哥也是看出兴趣来了，一起学习，马黑仙术现在还要加山人仙术了

樵歌

小辣椒 发表于 2022-11-30 22:06
樵哥哥也是看出兴趣来了，一起学习，马黑仙术现在还要加山人仙术了

他们是师兄弟俩。樵哥哥只看的份儿了

梦缘

山人 发表于 2022-11-30 10:16
改变子元素通用属性设置的 border-radius 值，会得到不同的叶片形状。下面的border-radius值为 0 50%

谢谢老师的代码分享，您辛苦了。