I am currently designing a page that requires the presence of numerous tree illustrations with leaves, spanning across the width at the bottom of the page. I have considered two methods to achieve this. One option is to create a single set of trees and leaves and then clone them using jQuery. The other option is to manually write HTML tags for each individual tree on the page.
Here is an example of HTML code for a group of trees:
<div class="tree-group-avg">
<div class="small-tree">
<span class="left-leaf"></span>
<span class="right-leaf"></span>
</div>
<div class="avg-tree">
<span class="left-leaf"></span>
<span class="right-leaf"></span>
</div>
<div class="large-tree">
<span class="left-leaf"></span>
<span class="right-leaf"></span>
</div>
</div>
In terms of CSS styling:
.tree-group-avg {margin:0 15px;display:inline-block; }
.tree-group-avg div {position:relative;}
.tree-group-avg .large-tree {background:#83919F; width:2px; height:70px; display:inline-block; margin:0 5px -5px 0}
.tree-group-avg .avg-tree {background:#83919F; width:2px; height:50px; display:inline-block; margin:0 5px -5px 0}
.tree-group-avg .small-tree {background:#83919F; width:2px; height:30px; display:inline-block; margin:0 5px -5px 0}
.left-leaf {width:10px; height:10px; border-radius:0 10px 0 10px; display:inline-block; background:#ACCF37; position:absolute; left:-10px;}
.right-leaf {width:10px; height:10px; border-radius:10px 0 10px 0; display:inline-block; background:#ACCF37; position:absolute; top:15px;}
The challenge lies in accommodating the varying heights of the different trees and determining the appropriate number of leaves. This can be achieved by either adjusting the 'top' property values in the CSS for different leaf sizes or implementing a JavaScript/jQuery solution to dynamically calculate the tree height and adjust the 'top' value for each leaf.
Here is a jsfiddle showcasing a sample set: http://jsfiddle.net/npT47/
Reference image for the desired outcome: