仅使用CSS3/HTML5绘制图像的标准方法-举个例子：HTML5徽标？

在HTML5中构建徽标而不使用

这是一个相当有趣的编程问题。徽标本身非常酷，看起来非常HTML5/CSS3
 此单标签徽标将帮助您-

纯css
点击查看live示例。
HTML5徽标是一个图形图像。只有一种语义正确的显示方式，即使用指向SVG格式图形的图像标记：

<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo.svg">



以其他方式显示它可能是一种学术编程练习，例如滥用CSS，但这种方式在语义上是不正确的。Canvas也不正确，除非徽标有一些动画或其他需要Canvas的脚本行为

你的问题与我如何在不使用p标记的情况下以语义正确的方式插入正文的一段相同？回答：你不能。您可以用其他方式插入，但这些方式在语义上不正确。
您可以查看post。会给你一些想法。@DainisaTools这是一篇很棒的帖子。Darcy Clarke的纯css html5徽标@Tomarinator真是太棒了，太不可思议了，这是一个非常棒的演示。Skew给出了一些想法。注意：您还可以在HTML5文档中内联包含SVG标记
#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; }

<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo.svg">