使用html+css3画一个波士顿凯尔特人的三叶草队标
在网上看到前段观察的文章《CSS3实现四叶草、水母与玻璃瓶》，不得不佩服博主的想象力和css功力，忍不住把玩一下作者的代码，然后裁剪了博主的代码，去掉了我用不到的部分，实现了一个简易的凯尔特人三叶草队标logo，效果如下：
里面的每一个元素都是一个div，然后用css3的tansform:rotate控制元素倾角，border-radius属性控制圆角，position:relative+偏移的方法实现位置控制。因为我开始的打算是实现把代码直接粘贴在论坛的回帖中就可以画出图形，所以没有使用单独的<style>标签，而是直接使用标签的style属性。
以下为代码实现：
1 <div> 2 <div 3 style="margin:0px; 4 padding:0px; 5 height:32px; 6 width:20px; 7 position:relative; 8 background:#008349; 9 z-index:2; 10 left:80px; 11 -moz-transform-origin:0% 100%; 12 -webkit-transform-origin:0% 100%; 13 transform-origin:0% 100%; 14 -moz-border-radius:10px 10px 0px 10px; 15 -webkit-border-radius:10px 10px 0px 0px; 16 border-radius:10px 10px 0px 0px; 17 top:30px; 18 -moz-transform:rotate(-45deg); 19 -webkit-transform:rotate(-45deg); 20 transform:rotate(-45deg);" 21 ></div> 22 <div 23 style="margin:0px; 24 padding:0px; 25 height:32px; 26 width:20px; 27 position:relative; 28 background:#008349; 29 z-index:2; 30 left:80px; 31 -moz-transform-origin:0% 100%; 32 -webkit-transform-origin:0% 100%; 33 transform-origin:0% 100%; 34 -moz-border-radius:10px 10px 0px 10px; 35 -webkit-border-radius:10px 10px 0px 0px; 36 border-radius:10px 10px 0px 0px; 37 top:-2px; 38 -moz-transform:rotate(-155deg); 39 -webkit-transform:rotate(-155deg); 40 transform:rotate(-155deg);" 41 ></div> 42 <div 43 style="margin:0px; 44 padding:0px; 45 height:32px; 46 width:20px; 47 position:relative; 48 background:#008349; 49 z-index:2; 50 left:80px; 51 -moz-transform-origin:0% 100%; 52 -webkit-transform-origin:0% 100%; 53 transform-origin:0% 100%; 54 -moz-border-radius:10px 10px 0px 10px; 55 -webkit-border-radius:10px 10px 0px 0px; 56 border-radius:10px 10px 0px 0px; 57 top:-34px; 58 -moz-transform:rotate(65deg); 59 -webkit-transform:rotate(65deg); 60 transform:rotate(65deg);" 61 ></div> 62 <div 63 style="margin:0px; 64 padding:0px; 65 height:32px; 66 width:20px; 67 position:relative; 68 background:#008349; 69 z-index:2; 70 left:60px; 71 -moz-transform-origin:100% 100%; 72 -webkit-transform-origin:100% 100%; 73 transform-origin:100% 100%; 74 -moz-border-radius:10px 10px 0px 0px; 75 -webkit-border-radius:10px 10px 0px 0px; 76 border-radius:10px 10px 0px 0px; 77 top:-66px; 78 -moz-transform:rotate(45deg); 79 -webkit-transform:rotate(45deg); 80 transform:rotate(45deg);" 81 ></div> 82 <div 83 style="margin:0px; 84 padding:0px; 85 height:32px; 86 width:20px; 87 position:relative; 88 background:#008349; 89 z-index:2; 90 left:60px; 91 -moz-transform-origin:100% 100%; 92 -webkit-transform-origin:100% 100%; 93 transform-origin:100% 100%; 94 -moz-border-radius:10px 10px 0px 0px; 95 -webkit-border-radius:10px 10px 0px 0px; 96 border-radius:10px 10px 0px 0px; 97 top:-98px; 98 -moz-transform:rotate(-65deg); 99 -webkit-transform:rotate(-65deg); 100 transform:rotate(-65deg);" 101 ></div> 102 <div 103 style="margin:0px; 104 padding:0px; 105 height:32px; 106 width:20px; 107 position:relative; 108 background:#008349; 109 z-index:2; 110 left:60px; 111 -moz-transform-origin:100% 100%; 112 -webkit-transform-origin:100% 100%; 113 transform-origin:100% 100%; 114 -moz-border-radius:10px 10px 0px 0px; 115 -webkit-border-radius:10px 10px 0px 0px; 116 border-radius:10px 10px 0px 0px; 117 top:-130px; 118 -moz-transform:rotate(155deg); 119 -webkit-transform:rotate(155deg); 120 transform:rotate(155deg);" 121 ></div> 122 <div 123 style="margin:0px; 124 padding:0px; 125 height:40px; 126 width:40px; 127 position:relative; 128 left:78px; 129 top:-130px; 130 border-left:3px solid #008349; 131 z-index:2; 132 border-radius:0px 0px 0px 40px; 133 -moz-border-radius:0px 0px 0px 40px; 134 -webkit-border-radius:0px 0px 0px 40px;" 135 ></div> 136 <div 137 style="margin:0px; 138 padding:0px; 139 position:relative; 140 left:30px; 141 top:-220px; 142 height:100px; 143 width:100px; 144 background:white; 145 z-index:1; 146 border-radius:50px; 147 -moz-border-radius:50px; 148 -webkit-border-radius:50px;" 149 ></div> 150 <div 151 style="margin:0px; 152 padding:0px; 153 position:relative; 154 left:18px; 155 top:-330px; 156 height:120px; 157 width:756px; 158 background:#008349; 159 color:white; 160 font:bold 400% Verdana;" 161 > 162 <p style="margin:0px;padding:0px;position:relative;left:120px;top:20px;"> 163 BOSTON CELTICS 164 </p> 165 </div> 166 </div>
