html中css如何设置显示国旗,使用CSS3实现 五星红旗

五星红旗

*{

margin: 0;

padding: 0;

}

.main{

width: 300px;

height: 200px;

background: #f00;

padding: 20px;

}

.star{

width: 0;

height: 0;

border-top: 10px solid yellow;

border-left: 17.32px solid transparent;

border-right: 17.32px solid transparent;

margin-top: 20px;

position: relative;

}

.star::before{

content: "";

display: block;

width: 0;

height: 0;

border-top: 10px solid yellow;

border-left: 17.32px solid transparent;

border-right: 17.32px solid transparent;

position: absolute;

top: -10px;

left: -17.32px;

transform: rotate(74deg);

}

.star::after{

content: "";

display: block;

width: 0;

height: 0;

border-top: 10px solid yellow;

border-left: 17.32px solid transparent;

border-right: 17.32px solid transparent;

position: absolute;

top: -10px;

left: -17.32px;

transform: rotate(147deg);

}

.big{

transform: scale(1.8,1.8);

position: absolute;

top: 55px;

left: 40px;

}

.small1,.small2,.small3,.small4{

transform: rotate(-45deg) scale(0.7,0.7);

position: absolute;

}

.small1{

top: 10px;

left: 80px;

}

.small2{

top: 40px;

left: 110px;

}

.small3{

top: 80px;

left: 110px;

}

.small4{

top: 110px;

left: 80px;

}