使用html+css画一个波士顿凯尔特人的三叶草logo

昨天在 oschina 上看到有人贴了一个 css 画的 oschina 的logo，忽然想起来以前我画过的一个东西。是去年 NBA 季后赛的时候，为了给凯尔特人加油用 css 画的凯尔特人队标。不是很精细，大家凑合着看看：

代码我也贴出来，没使用单独的 css 是因为当时想直接贴在论坛里：

<div>
     <div
         style="margin:0px;
                padding:0px;
                height:32px;
                width:20px;
                position:relative;
                background:#008349;
                z-index:2;
                left:80px;
                -moz-transform-origin:0% 100%;
                -webkit-transform-origin:0% 100%;
                transform-origin:0% 100%;
                -moz-border-radius:10px 10px 0px 10px;
                -webkit-border-radius:10px 10px 0px 0px;
                border-radius:10px 10px 0px 0px;
                top:30px;
                -moz-transform:rotate(-45deg);
                -webkit-transform:rotate(-45deg);
                transform:rotate(-45deg);"
     ></div>
     <div
         style="margin:0px;
                padding:0px;
                height:32px;
                width:20px;
                position:relative;
                background:#008349;
                z-index:2;
                left:80px;
                -moz-transform-origin:0% 100%;
                -webkit-transform-origin:0% 100%;
                transform-origin:0% 100%;
                -moz-border-radius:10px 10px 0px 10px;
                -webkit-border-radius:10px 10px 0px 0px;
                border-radius:10px 10px 0px 0px;
                top:-2px;
                -moz-transform:rotate(-155deg);
                -webkit-transform:rotate(-155deg);
                transform:rotate(-155deg);"
     ></div>
     <div
         style="margin:0px;
                padding:0px;
                height:32px;
                width:20px;
                position:relative;
                background:#008349;
                z-index:2;
                left:80px;
                -moz-transform-origin:0% 100%;
                -webkit-transform-origin:0% 100%;
                transform-origin:0% 100%;
                -moz-border-radius:10px 10px 0px 10px;
                -webkit-border-radius:10px 10px 0px 0px;
                border-radius:10px 10px 0px 0px;
                top:-34px;
                -moz-transform:rotate(65deg);
                -webkit-transform:rotate(65deg);
                transform:rotate(65deg);"
     ></div>
     <div
         style="margin:0px;
                padding:0px;
                height:32px;
                width:20px;
                position:relative;
                background:#008349;
                z-index:2;
                left:60px;
                -moz-transform-origin:100% 100%;
                -webkit-transform-origin:100% 100%;
                transform-origin:100% 100%;
                -moz-border-radius:10px 10px 0px 0px;
                -webkit-border-radius:10px 10px 0px 0px;
                border-radius:10px 10px 0px 0px;
                top:-66px;
                -moz-transform:rotate(45deg);
                -webkit-transform:rotate(45deg);
                transform:rotate(45deg);"
     ></div>
     <div
         style="margin:0px;
                padding:0px;
                height:32px;
                width:20px;
                position:relative;
                background:#008349;
                z-index:2;
                left:60px;
                -moz-transform-origin:100% 100%;
                -webkit-transform-origin:100% 100%;
                transform-origin:100% 100%;
                -moz-border-radius:10px 10px 0px 0px;
                -webkit-border-radius:10px 10px 0px 0px;
                border-radius:10px 10px 0px 0px;
                top:-98px;
                -moz-transform:rotate(-65deg);
                -webkit-transform:rotate(-65deg);
                transform:rotate(-65deg);"
     ></div>
     <div
         style="margin:0px;
                padding:0px;
                height:32px;
                width:20px;
                position:relative;
                background:#008349;
                z-index:2;
                left:60px;
                -moz-transform-origin:100% 100%;
                -webkit-transform-origin:100% 100%;
                transform-origin:100% 100%;
                -moz-border-radius:10px 10px 0px 0px;
                -webkit-border-radius:10px 10px 0px 0px;
                border-radius:10px 10px 0px 0px;
                top:-130px;
                -moz-transform:rotate(155deg);
                -webkit-transform:rotate(155deg);
                transform:rotate(155deg);"
     ></div>
     <div
         style="margin:0px;
                padding:0px;
                height:40px; 
                width:40px;
                position:relative;
                left:78px;
                top:-130px;
                border-left:3px solid #008349;
                z-index:2;
                border-radius:0px 0px 0px 40px;
                -moz-border-radius:0px 0px 0px 40px;
                -webkit-border-radius:0px 0px 0px 40px;"
     ></div>
     <div
         style="margin:0px;
                padding:0px;
                position:relative;
                left:30px;
                top:-220px;
                height:100px; 
                width:100px;
                background:white;
                z-index:1;
                border-radius:50px;
                -moz-border-radius:50px;
                -webkit-border-radius:50px;"
     ></div>
     <div
         style="margin:0px;
                padding:0px;
                position:relative;
                left:18px;
                top:-330px;
                height:120px; 
                width:756px;
                background:#008349;
                color:white;
                font:bold 400% Verdana;"
     >
         <p style="margin:0px;padding:0px;position:relative;left:120px;top:20px;">
             BOSTON CELTICS
         </p>
     </div>
 </div>