法国国旗与CSS在一个单独的div？

Question

的语义正确的HTML：

<div id="flag"> 
    <h1>French flag</h1> 
</div> 

有了这个唯一的，如何做一个French flag纯CSS（即33％的蓝，33％是白人，33％红）？

我创建了一个演示：jsfiddle

Answer 1

你可以utilitize pseude元素：http://jsfiddle.net/XdHxS/4/

#flag { 
    width: 99px; 
    height: 50px; 
    text-align: center; 
    line-height: 50px; 
    border: 1px solid #bbb; 
    margin: 10px; 
    position: relative; 
    background: #fff; 
} 

#flag:before { 
    content: ""; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    top: 0; 
    background: #00f; 
    width: 33%; 
    z-index: 4; 
} 
#flag:after { 
    content: ""; 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    top: 0; 
    background: #f00; 
    width: 33%; 
    z-index: 4; 
} 

#flag h1 { 
    position: relative; 
    font-size: 12px; 
    color: #999; 
    z-index: 16; 
} 

Answer 2

http://jsfiddle.net/XdHxS/3/

#flag { 
width: 99px; 
text-align: center; 
line-height: 25px; 
border-top: 25px solid blue; 
border-bottom: 25px solid red; 
margin: 10px; 
} 

#flag h1 { 
font-size: 12px; 
color: #999; 
display:block; 
height:25px; 
background-color:white; 
} 

Answer 3

不能说@grillz答案是错的任何手段，然而，这种技术也适用，使用内容：，：之前和之后。 http://jsfiddle.net/jalbertbowdenii/XdHxS/5/