之前国外有网友用CSS3绘制了一个哆啦A梦，最近也在学习CSS，于是就自己画了一个海贼王的图标。源代码如下：

  1<html lang="en">
  2<meta charset="utf8"></meta>
  3<title>むぎわら</title>
  4<style type="text/css">
  5h1 {
  6    text-align: center;
  7}
  8#container {
  9    margin: 50px auto;
 10    width: 502px;
 11    height: 322px;
 12}
 13#content {
 14    width: 100%;
 15    height: 100%;
 16    background: black;
 17    position: relative;
 18}
 19#content div {
 20    position: absolute;
 21}
 22.bone_area {
 23    /*background: rgba(0, 0, 255, 0.2);*/
 24    /*width: 400px; */
 25    /*height: 25px;*/
 26    width: 348px;
 27    height: 270px;
 28    left: 77px;
 29    top: 25px;
 30}
 31/* ------------------------ */
 32.bone {
 33    height: 25px;
 34    width: 370px;
 35    top: 122.5px;
 36    left: -11px;
 37    background: white;
 38}
 39div#left_bone {
 40    transform: rotate(36deg);
 41    -moz-transform: rotate(36deg);
 42    -webkit-transform: rotate(36deg);
 43}
 44div#right_bone {
 45    transform: rotate(-36deg);
 46    -moz-transform: rotate(-36deg);
 47    -webkit-transform: rotate(-36deg);
 48}
 49/* ------------------------ */
 50div.bone_end {
 51    transform: rotate(45deg);
 52    -moz-transform: rotate(45deg);
 53    -webkit-transform: rotate(45deg);
 54    background: white;
 55    width: 32px;
 56    height: 32px;
 57    border-radius: 15px;
 58    -moz-border-radius: 15px;
 59    -webkit-border-radius: 15px;
 60}
 61#bone1 {
 62    top: 0px;
 63    left: 21px;
 64}
 65#bone2 {
 66    top: 21px;
 67    left: 0px;
 68}
 69#bone3 {
 70    top: 213px;
 71    left: 0;
 72}
 73#bone4 {
 74    top: 232px;
 75    left: 21px;
 76}
 77#bone5 {
 78    top: 21px;
 79    left: 308px;
 80}
 81#bone6 {
 82    top: 0px;
 83    left: 290px;
 84}
 85#bone7 {
 86    top: 213px;
 87    left: 306px;
 88}
 89#bone8 {
 90    top: 232px;
 91    left: 290px;
 92}
 93/* ------------------------ */
 94.head {
 95    top: 40px;
 96    left: 140px;
 97    width: 222px;
 98    height: 262px;
 99    /*background: rgba(0, 0, 255, 0.2);*/
100}
101#hat {
102    width: 162px;
103    height: 81px;
104    left: 30px;
105    border: 1px solid black;
106    border-top-left-radius: 81px;
107    border-top-right-radius: 81px;
108    -moz-border-top-left-radius: 81px;
109    -moz-border-top-right-radius: 81px;
110    -webkit-border-top-left-radius: 81px;
111    -webkit-border-top-right-radius: 81px;
112    /* W3C Markup, IE10 Release Preview */
113    background: linear-gradient(
114        to bottom, #FEBF00 0%, #FEBF00 50%, #000000 50%, #900200 51%, #900200 100%);
115    /* IE10 Consumer Preview */
116    background: -ms-linear-gradient(
117        top, #FEBF00 0%, #FEBF00 50%, #000000 50%, #900200 51%, #900200 100%);
118    /* Mozilla Firefox */
119    background: -moz-linear-gradient(
120        top, #FEBF00 0%, #FEBF00 50%, #000000 50%, #900200 51%, #900200 100%);
121    /* Opera */
122    background: -o-linear-gradient(
123        top, #FEBF00 0%, #FEBF00 50%, #000000 50%, #900200 51%, #900200 100%);
124    /* Webkit (Safari/Chrome 10) */
125    background: -webkit-gradient(
126        linear, left top, left bottom, color-stop(0, #FEBF00), color-stop(0.8, #FEBF00), color-stop(0.8, #000000), color-stop(0.81, #900200), color-stop(1, #900200));
127    /* Webkit (Chrome 11+) */
128    background: -webkit-linear-gradient(
129        top, #FEBF00 0%, #FEBF00 50%, #000000 50%, #900200 51%, #900200 100%);
130}
131#hat_line {
132    background: #FEBF00;
133    border: 3px solid black;
134    width: 222px;
135    height: 222px;
136    top: -45px;
137    transform:scale(1,0.15);
138    -ms-transform:scale(1,0.15); /* IE 9 */
139    -moz-transform:scale(1,0.15); /* Firefox */
140    -webkit-transform:scale(1,0.15); /* Safari and Chrome */
141    -o-transform:scale(1,0.15); /* Opera */
142    border-radius: 111px;
143    -moz-border-radius: 111px;
144    -webkit-border-radius: 111px;
145    -o-border-radius: 111px;
146}
147#face {
148    width: 162px;
149    height: 96px;
150    left: 30px;
151    top: 66px;
152    background: #FFFFFF;
153    border: 1px solid black;
154    border-top-left-radius: 4px;
155    border-top-right-radius: 4px;
156    -moz-border-top-left-radius: 4px;
157    -moz-border-top-right-radius: 4px;
158    -webkit-border-top-left-radius: 4px;
159    -webkit-border-top-right-radius: 4px;
160    border-bottom-left-radius: 81px;
161    border-bottom-right-radius: 81px;
162    -moz-border-bottom-left-radius: 81px;
163    -moz-border-bottom-right-radius: 81px;
164    -webkit-border-bottom-left-radius: 81px;
165    -webkit-border-bottom-right-radius: 81px;
166    z-index: 2;
167}
168.eye {
169    background: black;
170    width: 45px;
171    height: 45px;
172    top: 6px;
173    border-radius: 22.5px;
174    -moz-border-radius: 22.5px;
175    -webkit-border-radius: 22.5px;
176}
177#left_eye {
178    left: 12px;
179}
180#right_eye {
181    left: 105px;
182}
183#nose {
184    background: black;
185    width: 22px;
186    height: 22px;
187    border-radius: 11px;
188    left: 70px;
189    top: 55px;
190    -moz-border-radius: 11px;
191    -webkit-border-radius: 11px;
192}
193/* ------------------------ */
194#chin {
195    width: 90px;
196    height: 100px;
197    /*background: rgba(255, 255, 0, 0.2);*/
198    left: 66px;
199    top: 150px;
200}
201#bottom_chin {
202    width: 90px;
203    height: 40px;
204    top: 45px;
205    background: white;
206    border-top-left-radius: 5px;
207    border-top-right-radius: 5px;
208    -moz-border-top-left-radius: 5px;
209    -moz-border-top-right-radius: 5px;
210    -webkit-border-top-left-radius: 4px;
211    -webkit-border-top-right-radius: 4px;
212    border-bottom-left-radius: 40px;
213    border-bottom-right-radius: 40px;
214    -moz-border-bottom-left-radius: 40px;
215    -moz-border-bottom-right-radius: 40px;
216    -webkit-border-bottom-left-radius: 40px;
217    -webkit-border-bottom-right-radius: 40px;
218    border: 1px solid black;
219}
220#left_chin {
221    width: 55px;
222    height: 50px;
223    top: 5px;
224    background: white;
225    transform: rotate(7deg);
226    -moz-transform: rotate(7deg);
227    -webkit-transform: rotate(7deg);
228    -o-transform: rotate(7deg);
229    -ms-transform: rotate(7deg);
230    transform-origin: left bottom;
231    -moz-transform-origin: left bottom;
232    -webkit-transform-origin: left bottom;
233    -ms-transform-origin: left bottom;
234    -o-transform-origin: left bottom;
235    border-left: 1px solid black;
236}
237#right_chin {
238    width: 55px;
239    height: 50px;
240    top: 5px;
241    left: 36px;
242    background: white;
243    transform: rotate(-7deg);
244    -moz-transform: rotate(-7deg);
245    -webkit-transform: rotate(-7deg);
246    -o-transform: rotate(-7deg);
247    -ms-transform: rotate(-7deg);
248    transform-origin: right bottom;
249    -moz-transform-origin: right bottom;
250    -webkit-transform-origin: right bottom;
251    -ms-transform-origin: right bottom;
252    -o-transform-origin: right bottom;
253    border-right: 1px solid black;
254}
255.tooth {
256    background: black;
257}
258#tooth_up1 {
259    width: 42px;
260    height: 1px;
261    top: 27px;
262    left: 3px;
263    transform: rotate(9deg);
264    -moz-transform: rotate(9deg);
265    -webkit-transform: rotate(9deg);
266    -o-transform: rotate(9deg);
267    -ms-transform: rotate(9deg);
268}
269#tooth_up2 {
270    width: 42px;
271    height: 1px;
272    top: 27px;
273    left: 45px;
274    transform: rotate(-9deg);
275    -moz-transform: rotate(-9deg);
276    -webkit-transform: rotate(-9deg);
277    -o-transform: rotate(-9deg);
278    -ms-transform: rotate(-9deg);
279}
280#tooth_down1 {
281    width: 42px;
282    height: 1px;
283    top: 45px;
284    left: 3px;
285    transform: rotate(9deg);
286    -moz-transform: rotate(9deg);
287    -webkit-transform: rotate(9deg);
288    -o-transform: rotate(9deg);
289    -ms-transform: rotate(9deg);
290}
291#tooth_down2 {
292    width: 46px;
293    height: 1px;
294    top: 45px;
295    left: 45px;
296    transform: rotate(-9deg);
297    -moz-transform: rotate(-9deg);
298    -webkit-transform: rotate(-9deg);
299    -o-transform: rotate(-9deg);
300    -ms-transform: rotate(-9deg);
301}
302#vtooth1 {
303    width: 1px;
304    height: 40px;
305    left: 22px;
306    top: 6px;
307    transform: rotate(7deg);
308    -moz-transform: rotate(7deg);
309    -webkit-transform: rotate(7deg);
310    -o-transform: rotate(7deg);
311    -ms-transform: rotate(7deg);
312}
313#vtooth2 {
314    width: 1px;
315    height: 40px;
316    left: 44px;
317    top: 10px;
318}
319#vtooth3 {
320    width: 1px;
321    height: 40px;
322    left: 66px;
323    top: 6px;
324    transform: rotate(-7deg);
325    -moz-transform: rotate(-7deg);
326    -webkit-transform: rotate(-7deg);
327    -o-transform: rotate(-7deg);
328    -ms-transform: rotate(-7deg);
329}
330</style>
331
332
333<h1>ワンピース -- むぎわら</h1>
334<div id="container">
335    <div id="content">
336        <div class="bone_area">
337            <div class="bone" id="left_bone"></div>
338            <div class="bone" id="right_bone"></div>
339            <div class="bone_end" id="bone1"></div>
340            <div class="bone_end" id="bone2"></div>
341            <div class="bone_end" id="bone3"></div>
342            <div class="bone_end" id="bone4"></div>
343            <div class="bone_end" id="bone5"></div>
344            <div class="bone_end" id="bone6"></div>
345            <div class="bone_end" id="bone7"></div>
346            <div class="bone_end" id="bone8"></div>
347        </div>
348        <div class="head">
349            <div id="hat"></div>
350            <div id="hat_line"></div>
351            <div id="face">
352                <div class="eye" id="left_eye"></div>
353                <div class="eye" id="right_eye"></div>
354                <div id="nose"></div>
355            </div>
356            <div id="chin">
357                <div id="bottom_chin"></div>
358                <div id="left_chin"></div>
359                <div id="right_chin"></div>
360                <div class="tooth" id="tooth_up1"></div>
361                <div class="tooth" id="tooth_up2"></div>
362                <div class="tooth" id="tooth_down1"></div>
363                <div class="tooth" id="tooth_down2"></div>
364                <div class="tooth" id="vtooth1"></div>
365                <div class="tooth" id="vtooth2"></div>
366                <div class="tooth" id="vtooth3"></div>
367            </div>
368        </div>
369    </div>
370</div>
371</html>

将以上代码保存为X.html看到的就是一个海贼王草帽logo 。