用css和html做一个宣传海报,用css和html实现的一个forest logo

用css和html实现的一个forest logo

html代码如下：

css代码如下：

* {

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);

}

预览效果；不支持ie8及以下的浏览器：

补充：web前端 , HTML/CSS ,