Div+CSS教程：如何制作四叶草

1
2
3
4
5
6
7
8
9

<div class="clover">
<div class="leaves">
<i class="leave angleN"></i>
<i class="leave angleS"></i>
<i class="leave angleW"></i>
<i class="leave angleE"></i>
</div>
<i class="branch"></i>
</div>

    一个leaves挂着叶子，叶瓣用四个I标签表示，一个branch代表叶茎；

叶瓣
    每个叶瓣都是一个leave，然后用angle控制它们的旋转，然而一个leave的话是画不出一个心形的，所以我用多了一个leave:after画另 外一半，两个表现出来的形状是一样的，一个头圆下方的形状，圆可以用border-radius圆角来做，然后通过以左下角为原点，旋转90度，来让它们 错开重叠成一个心形，如果你觉得抽象的话，可以参考下图：

    把leave:after的颜色调深一些，就可以看出它们是怎么一个重叠关系了…因为叶瓣与叶瓣之间存在之间隙，所以我旋转的原点有稍作偏移，而且在心形的底部如果太尖感觉有点怪，所以也做了一个小圆角处理，到此叶瓣主体就绘制完成；

叶茎

    叶茎的话就是一个border做了一个大弧度圆角跟小弧度圆角的处理，如图：

    如果border处于圆角状态，并且临近的border不显示，那么该border会向不显示的border拉一条锥形弧线， 这形状恰巧符合叶茎的形状，大弧度何以勾勒叶茎的基本形状，小弧度可以用来收尾，这样会比直角收尾柔和很多，到此四叶草制作完毕；