.logo{ height: 200px; width: 160px;
margin: 150px auto;
position: relative;
}
#tree { border-bottom: 200px solid #5b9a68;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
position: absolute; top: 0; left: 0;
height: 0; width: 0;
}
#trunk{ height: 85px; width: 16px;
background: #3b543f;
position: absolute; left: 72px; bottom: -20px;
}
#left-branch{ background: #3b543f;
height: 30px; width: 6px;
position: absolute; left: -10px; top: 15px;
transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
}
#right-bottom-branch{ background: #3b543f;
height: 50px; width: 6px;
position: absolute; top: 15px; left: 23px;
transform: rotate(50deg);
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-o-transform: rotate(50deg);
}
#right-top-branch{ background: #3b543f;
height: 27px; width: 6px;
position: absolute; top: 2px; left: 20px;
transform: rotate(50deg);
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-o-transform: rotate(50deg);
}
3 Comments
(close)Lüke
Great!
I think on making a new geometric logo using css for the near future.
Keep on sharing nice codes, i love them ♥
membro
Awesome work, thanks so much for sharing!
Muhammad Faizan
Awesome! Learned so much from this, i am beginning with css3 and html5 and this portal will be the Class 1 till my +2