html5绘制图像使用什么元素,仅使用CSS3/HTML5绘制图像的标准方法 - 例如：HTML 5徽标？...

这种单一的标签标志将帮助你 -

纯CSS

CSS-

#css3icon {

outline:solid 1px transparent;

display:inline-block;

position:relative;

height:0.8em; width:0.8em;

background:transparent;

color:transparent;

line-height:0.8em;

overflow:visible;

box-shadow:

0.8em 0 0 #38c,

1.4em 0 0 #38c,

2em 0 0 #38c,

2.6em 0 0 #38c,

3.2em 0 0 #38c,

3.6em 0 0 #38c,

4em 0 0 #38c,

4em 0.65em 0 #38c,

0.8em 1.3em 0 #38c,

1.4em 1.3em 0 #38c,

2em 1.3em 0 #38c,

2.6em 1.3em 0 #38c,

3.2em 1.3em 0 #38c,

3.6em 1.3em 0 #38c,

4em 1.3em 0 #38c,

4em 1.9em 0 #38c,

0.8em 2.6em 0 #38c,

4em 2.6em 0 #38c;

transform: skewX(-12deg);

-webkit-transform: skewX(-12deg);

-ms-transform: skewX(-12deg);

}

#css3icon:before {

position:absolute;

content:'';

display:block;

height:0.8em; width:2em;

margin:3.4em 0 0 0.8em;

background:#38c;

transform: skew(-1deg,18.4deg);

transform-origin: 100% 100%;

-webkit-transform: skew(-1deg,18.4deg);

-webkit-transform-origin: 100% 100%;

-ms-transform: skew(-1deg,18.4deg);

-ms-transform-origin: 100% 100%;

border-right:solid 1px #38c;

}

#css3icon:after {

position:absolute;

content:'';

display:block;

height:0.8em; width:2em;

margin:3.4em 0 0 2.8em;

background:#38c;

transform: skew(1deg,-18.4deg);

transform-origin: 0% 100%;

-webkit-transform: skew(1deg,-18.4deg);

-webkit-transform-origin: 0 100%;

-ms-transform: skew(1deg,-18.4deg);

-ms-transform-origin: 0 100%;

}

body {

width:100%;

padding-top:1em;

font-size:3em;

text-align:center;

}

body > * { position:relative; left:-2.4em; }

点击Here对于活生生的例子。