Question

语义正确的HTML：

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

仅限于此，纯CSS中的French flag如何（即33％蓝色，33％白色，33％红色）？

我创建了一个演示：jsfiddle

Answer 1

您可以使用伪元素：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答案是错误的，但是这种技术也可以，使用内容：，：before和：after。 http://jsfiddle.net/jalbertbowdenii/XdHxS/5/

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

3 个答案: