html css五星红旗,利用css3转换transform画五星红旗

Document

*{

padding:0;

margin:0;

}

section {

width: 300px;

height: 200px;

background-color: red;

margin: 50px auto;

}

.contain {

width: 30px;

height: 30px;

position: relative;

}

.star {

width:0;

height:0;

border-left: 15px solid transparent;

border-right: 15px solid transparent;

border-bottom: 10px solid yellow;

position: relative;

transform: rotate(35deg);

}

.star::before {

content:"";

display: block;

width:0;

height:0;

border-left: 15px solid transparent;

border-right: 15px solid transparent;

border-bottom: 10px solid yellow;

position: absolute;

transform: rotate(70deg);

left:-15px;

}

.star::after {

content:"";

display: block;

width:0;

height:0;

border-left: 15px solid transparent;

border-right: 15px solid transparent;

border-bottom: 10px solid yellow;

position: absolute;

transform: rotate(145deg);

left:-15px;

}

.contain .small {

transform: scale(0.6);

}

.contain .big {

top: 18px;

left: 30px;

transform: rotate(-35deg) scale(2);

}

.contain .small1 {

left: 76px;

top: 14px;

}

.contain .small2 {

left: 90px;

top:-24px;

}

.contain .small3 {

left: 90px;

top:-30px;

}

.contain .small4 {

left: 78px;

top:-37px;

}