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可以轻松实现各种不同国家的国旗，非常方便灵活，让我们来体验一下吧。