在網(wǎng)上看到前段觀察的文章《CSS3實現(xiàn)四葉草、水母與玻璃瓶》，不得不佩服博主的想象力和css功力，忍不住把玩一下作者的代碼，然后裁剪了博主的代碼，去掉了我用不到的部分，實現(xiàn)了一個簡易的凱爾特人三葉草隊標logo，效果如下：

里面的每一個元素都是一個div，然后用css3的tansform:rotate控制元素傾角，border-radius屬性控制圓角，position:relative+偏移的方法實現(xiàn)位置控制。因為我開始的打算是實現(xiàn)把代碼直接粘貼在論壇的回帖中就可以畫出圖形，所以沒有使用單獨的<style>標簽，而是直接使用標簽的style屬性。

以下為代碼實現(xiàn)：

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>

代碼下載：http://files.cnblogs.com/legendlee/celtics.zip

轉(zhuǎn)載于:https://www.cnblogs.com/legendlee/archive/2012/06/01/2529396.html

總結(jié)

以上是生活随笔為你收集整理的使用html+css3画一个波士顿凯尔特人的三叶草队标的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。