CSS3寫國旗

// 美國國旗
.flag-usa {
width: 400px;
height: 240px;
background: linear-gradient(to bottom, #C60C30 0%, #C60C30 30%, #FFF 30%, #FFF 70%, #002868 70%);
}
.flag-usa .star {
position: absolute;
width: 25px;
height: 25px;
background: #FFF;
border-radius: 50%;
}
.flag-usa .star:nth-child(1) {
top: 10%;
left: 8.33%;
transform: rotate(45deg);
}
.flag-usa .star:nth-child(2) {
top: 18%;
left: 25%;
}
.flag-usa .star:nth-child(3) {
top: 10%;
right: 8.33%;
transform: rotate(-45deg);
}
.flag-usa .star:nth-child(4) {
top: 28%;
left: 8.33%;
transform: rotate(-45deg);
}
.flag-usa .star:nth-child(5) {
top: 35%;
left: 25%;
transform: rotate(45deg);
}
.flag-usa .star:nth-child(6) {
top: 28%;
right: 8.33%;
transform: rotate(45deg);
}
.flag-usa .star:nth-child(7) {
top: 45%;
left: 8.33%;
transform: rotate(45deg);
}
.flag-usa .star:nth-child(8) {
top: 52%;
left: 25%;
transform: rotate(-45deg);
}
.flag-usa .star:nth-child(9) {
top: 45%;
right: 8.33%;
transform: rotate(-45deg);
}
.flag-usa .star:nth-child(10) {
top: 63%;
left: 8.33%;
transform: rotate(-45deg);
}
.flag-usa .star:nth-child(11) {
top: 70%;
left: 25%;
transform: rotate(45deg);
}
.flag-usa .star:nth-child(12) {
top: 63%;
right: 8.33%;
transform: rotate(45deg);
}

以上是美國國旗的CSS3代碼，注意其中用到了linear-gradient線性漸變和nth-child偽類選擇器等技巧。利用CSS3可以輕松實現各種不同國家的國旗，非常方便靈活，讓我們來體驗一下吧。