It's christmas so what's a better thing to do for a CSS coder than to create a christmas tree?

Our christmas tree consists of a tree trunk, three sections of branches with it's own decorative band and a star at the top. I think that can be represented quite well with this html code:

<div class="ctree"> <div class="trunk"></div> <div class="branches bottom"><div class="band"></div></div> <div class="branches middle"><div class="band"></div></div> <div class="branches top"><div class="band"></div></div> <div class="star"></div> </div>

The tree trunk

Our tree trunk is the simplest part of the christmas tree. It is just a simple, brown triangle that is easily created by a little border magic

.ctree .trunk { border-color: brown transparent; border-style: solid; border-width: 0 15px 300px; bottom: 0; left: 50%; height: 0px; position: absolute; width: 0; }

The branches

We will use the same border trick for the branches, but with a little border-radius twist to create a nicely rounded bottom edge. After that, we just need a little positioning and border adjustment for the two other branch sections.

.ctree .branches { border-bottom-left-radius: 50% 20px; border-bottom-right-radius: 50% 20px; border-color: green transparent; border-style: solid; border-width: 0 100px 120px; bottom: -270px; height: 0px; left: -100px; position: absolute; width: 0; }

NB! Opera doesn't like this border-radius trick so the branches look kinda funky there. I'll figure it out another day.

The decorative bands

It's not a christmas tree if it doesn't have any decorations. We will use some nice decorative bands for our christmas tree. These are created by building a circle consisting of a transparent block with a visible border. And then we will use the clip property to only display the part that is on top of the branches.

.ctree .band { background-color: transparent; border-color: white; border-style: solid; border-width: 6px; border-radius: 103px; clip: rect(152px, 260px, 260px, 82px); margin-bottom: 15px; height: 200px; right: -50px; margin-left: -165px; position: absolute; bottom: -110px; width: 200px; }

The bands does not match the branch edges perfectly, but that is not a problem as long as the bands are the same color as the background color of our canvas,

The star

To top it off, we put a shining star on the top end of the tree trunk. While it might look complicated, it is only three triangles (each created like our tree trunk) that are rotated and positioned to form a five-point star. We only have one html element for the star, but via use of the :before and :after psudeo-elements, we have all the hooks we need. Thanks to Kit MacAllister for the technique.

.ctree .star { border-color: yellow transparent; border-style: solid; border-width: 0 30px 21px; -moz-border-end-style:dashed !important; display: block; height: 0px; left: -28px; position: absolute; top: -10px; -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -webkit-transform: rotate(35deg); transform: rotate(35deg); width: 0px; } .star:before { border-color: yellow transparent; border-style: solid; border-width: 0 9px 21px; -moz-border-end-style:dashed !important; content: ''; display: block; height: 0; left: -22px; position: absolute; top: -14px; -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform:rotate(-35deg); width: 0; } .star:after { border-color: yellow transparent; border-style: solid; border-width: 0 30px 21px; -moz-border-end-style:dashed !important; content: ''; display: block; height: 0px; left: -34px; position: absolute; top: 3px; -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -webkit-transform: rotate(-70deg); transform: rotate(-70deg); width: 0px; }

The complete christmas tree

And with the rest of the branches and decorations in place, we end up with this christmas tree.

Complete CSS code

NB! This post is not tested in Internet Explorer but I believe it should work in IE9 and up.