本人CSS3写的几面国旗

源码：

css：

body{ background-color:#D0DADF;} .flag{ width:450px; height:300px;box-shadow:5px 5px 5px #333; -moz-box-shadow:5px 5px 5px #333; float:left; margin:0px 15px 15px; -webkit-box-shadow:5px 5px 5px #999; position:relative; overflow:hidden;} .china{ background-color:#F00;} .china .bigStar{ color:#FF0; font-size:96px; position:absolute; top:20px; left:21px;} .china .smallStar{ color:#FF0; position:absolute; font-size:28px;} .china .one{-o-transform:rotate(23deg); -moz-transform:rotate(23deg); -webkit-transform:rotate(23deg); top:18px; left:143px;} .china .two{ -o-transform:rotate(46deg); -moz-transform:rotate(46deg); -webkit-transform:rotate(46deg); top:49px; left:173px;} .china .three{ -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); top:93px; left:167px;} .china .four{-o-transform:rotate(23deg); -moz-transform:rotate(23deg); -webkit-transform:rotate(23deg); top:129px; left:140px;} .congo{ background: #008836;} .congo .yellow{ width:150px; height:300px; -o-transform:skew(-45deg,0deg); -moz-transform:skew(-45deg,0deg); -webkit-transform:skew(-45deg,0deg); position:absolute; left:150px; background-color:#FEFE00;} .congo .red{ width:425px; height:425px; background-color:#F00; -o-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); position:absolute; top:88px; left:237px;} .korea{ background: #FEFEFE;} .korea .threeLine{ width:76px; position:absolute;} .korea .line{ width:76px;height:17px; background-color:#000000; margin-bottom:6px; position:relative;} .korea .line_dir_1{-o-transform:rotate(-48deg); -moz-transform:rotate(-48deg); -webkit-transform:rotate(-48deg); top:32px; left:55px;} .korea .line_dir_2{ -o-transform:rotate(48deg); -moz-transform:rotate(48deg); -webkit-transform:rotate(48deg); top:33px; right:57px;} .korea .line_dir_3{ -o-transform:rotate(48deg); -moz-transform:rotate(48deg); -webkit-transform:rotate(48deg); top:211px; left:51px;} .korea .line_dir_4{ -o-transform:rotate(-48deg); -moz-transform:rotate(-48deg); -webkit-transform:rotate(-48deg); top:211px; right:52px;} .korea .zindex_0{ z-index:0;} .korea .zindex_1{ z-index:1;} .korea .vline{ width:17px; height:65px; background-color:#fff; position:absolute; top:-1px; left:29px; z-index:1} .korea .mround{ width:180px; height:180px; border-radius:90px; -moz-border-radius:90px; -webkit-border-radius:90px; background-color:#FE0000; position:absolute; top:62px; left:128px;-o-transform:rotate(22deg); -moz-transform:rotate(22deg); -webkit-transform:rotate(22deg);} .korea .halfblueround{ width:180px; height:90px; border-radius:0px 0px 90px 90px; -moz-border-radius:0px 0px 90px 90px; -webkit-border-radius:0px; -webkit-border-bottom-left-radius:90px; -webkit-border-bottom-right-radius:90px;/*解决safari半圆显示问题*/background-color:#0B4199;position:absolute; bottom:0px;} .korea .Shalfblueround{ width:90px; height:45px; border-radius:45px 45px 0px 0px; -moz-border-radius:45px 45px 0px 0px; -webkit-border-radius:0px; -webkit-border-top-left-radius:45px; -webkit-border-top-right-radius:45px;background-color:#0B4199; position:absolute; right:0px; top:46px;} .korea .Shalfredround{ width:90px; height:45px; border-radius:0px 0px 45px 45px; -moz-border-radius:0px 0px 45px 45px; -webkit-border-radius:0px; -webkit-border-bottom-left-radius:45px; -webkit-border-bottom-right-radius:45px;background-color:#FE0000; position:absolute; left:0px; top:89px;} .tuerqi{ background:#FE0000;} .tuerqi .whiteRound{ width:156px; height:156px; background-color:#FEFEFE;border-radius:78px; -moz-border-radius:78px; -webkit-border-radius:78px; position:absolute; top:72px; left:88px;} .tuerqi .redRound{ width:126px; height:126px; background-color:#FE0000;border-radius:63px; -moz-border-radius:63px; -webkit-border-radius:63px; position:absolute; top:87px; left:123px;} .tuerqi .Star{ color:#fff; font-size:60px; position:absolute; top:113px; left:226px; transform:rotate(-16deg); -o-transform:rotate(-16deg);-moz-transform:rotate(-16deg); -webkit-transform:rotate(-16deg);}

html

<div class="flag china"> <div class="bigStar">★</div> <div class="smallStar one">★</div> <div class="smallStar two">★</div> <div class="smallStar three">★</div> <div class="smallStar four">★</div> </div> <div class="flag congo"> <div class="yellow"></div> <div class="red"></div> </div> <div class="flag korea"> <div class="threeLine line_dir_1"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <div class="threeLine line_dir_2"> <div class="vline"></div> <div class="line zindex_0"></div> <div class="line zindex_1"></div> <div class="line zindex_0"></div> </div> <div class="threeLine line_dir_3"> <div class="vline"></div> <div class="line zindex_1"></div> <div class="line zindex_0"></div> <div class="line zindex_1"></div> </div> <div class="threeLine line_dir_4"> <div class="vline"></div> <div class="line zindex_0"></div> <div class="line zindex_0"></div> <div class="line zindex_0"></div> </div> <div class="mround"> <div class="halfblueround"></div> <div class="Shalfredround"></div> <div class="Shalfblueround"></div> </div> </div> <div class="flag tuerqi"> <div class="whiteRound"></div> <div class="redRound"></div> <div class="Star">★</div> </div>

 

 兼容最新的 FF Opera Safari Chrome 。IE9没装 没得看。IE9以下不兼容 呵呵

要点：
1、定位
四面国旗都用到了定位
2、层次
在韩国国旗四角用了层次 z-index 控制显示
3、旋转
四面国旗都用到旋转，控制五星的角度跟刚果国旗红色部分旋转，通过溢出隐藏的方法，把多余的内容隐藏
4、半圆
利用border-radius圆角，如上半圆，只设置上面两个圆角，另外两个设为零，高度设为半径，宽度为直径，就可以得到半圆，可以在韩国国旗的样式了解
5、其他
比如box-shadow、skew等css3才有的属性

另外地址：

http://bbs.blueidea.com/thread-2985513-1-1.html