A forest logo implemented with CSS and HTML

A forest logo implemented with CSS and HTML

The HTML code is as follows:

<div class= "logo" >    <div id= "tree" ></div>    <div id= "trunk" >        <div id= " Left-branch "></div>        <div id=" Right-bottom-branch "></div>        <div id=" Right-top-branch "></div>    </div></div> www.php.cn

The CSS code is as follows:

* {margin:0; padding:0;}.    Logo {height:300px;    width:260px;    margin:150px Auto; Position:relative;}    #tree {border-bottom:300px solid #063;    border-left:130px solid Transparent;    border-right:130px solid Transparent;    Position:absolute;    left:0;    top:0;    height:0; width:0;}    #trunk {height:180px;    width:32px;    Background: #3b543f;    Position:absolute;    left:109px; bottom:-60px;}    #left-branch {background: #3b543f;    height:70px;    width:10px;    Position:absolute;    left:-18px;    top:15px;    Transform:rotate ( -40DEG);    -webkit-transform:rotate ( -40DEG);    -moz-transform:rotate ( -40DEG);    -o-transform:rotate ( -40DEG); -ms-transform:rotate ( -40deg);}    #right-bottom-branch {background: #3b543f;    height:100px;    width:10px;    Position:absolute;    top:20px;    left:50px;    Transform:rotate (40DEG);    -webkit-transform:rotate (40DEG);    -moz-transform:rotate (40DEG);    -o-transform:rotate (40DEG); -ms-transform:rotate (40deg);} #right-top-branch {background: #3b543f;    height:50px;    width:10px;    Position:absolute;    left:40px;    top:0px;    Transform:rotate (40DEG);    -webkit-transform:rotate (40DEG);    -moz-transform:rotate (40DEG);    -o-transform:rotate (40DEG); -ms-transform:rotate (40deg);}

