法國國旗與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/