- 五角星的画法:3个三角形
- 发现matrix2d矩阵里,只支持默认单位px,不支持vw,em,rem等自适应单位,如有解决方案敬请指点!
国旗.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>国旗</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.flag {
margin: 2vw auto;
width: 51.2vw;
height: 34.1vw;
background: #f00;
}
.flag-star,
.flag-star::before,
.flag-star::after {
width: 0;
height: 0;
border-right: 5.0vw solid transparent;
border-left: 5.0vw solid transparent;
border-top: 3.5vw solid #ff0;
}
.flag-star {
position: relative;
}
.flag-star::after,
.flag-star::before {
position: absolute;
content: '';
top: -3.5vw;
left: -5vw;
}
.flag-star::after {
-webkit-transform: rotate(70.5deg);
-moz-transform: rotate(70.5deg);
-ms-transform: rotate(70.5deg);
-o-transform: rotate(70.5deg);
transform: rotate(70.5deg);
}
.flag-star::before {
-webkit-transform: rotate(-70.5deg);
-moz-transform: rotate(-70.5deg);
-ms-transform: rotate(-70.5deg);
-o-transform: rotate(-70.5deg);
transform: rotate(-70.5deg);
}
.flag-star:nth-child(1) {
-webkit-transform: translate(3.5vw, 7vw) scale(.9);
-moz-transform: translate(3.5vw, 7vw) scale(.9);
-ms-transform: translate(3.5vw, 7vw) scale(.9);
-o-transform: translate(3.5vw, 7vw) scale(.9);
transform: translate(3.5vw, 7vw) scale(.9);
}
.flag-star:nth-child(2) {
-webkit-transform: translate(11vw, -2vw) scale(.33) rotate(-45deg);
-moz-transform: translate(11vw, -2vw) scale(.33) rotate(-45deg);
-ms-transform: translate(11vw, -2vw) scale(.33) rotate(-45deg);
-o-transform: translate(11vw, -2vw) scale(.33) rotate(-45deg);
transform: translate(11vw, -2vw) scale(.33) rotate(-45deg);
}
.flag-star:nth-child(3) {
-webkit-transform: translate(15vw, -2vw) scale(.33) rotate(45deg);
-moz-transform: translate(15vw, -2vw) scale(.33) rotate(45deg);
-ms-transform: translate(15vw, -2vw) scale(.33) rotate(45deg);
-o-transform: translate(15vw, -2vw) scale(.33) rotate(45deg);
transform: translate(15vw, -2vw) scale(.33) rotate(45deg);
}
.flag-star:nth-child(4) {
-webkit-transform: translate(15vw, 0px) scale(.33);
-moz-transform: translate(15vw, 0px) scale(.33);
-ms-transform: translate(15vw, 0px) scale(.33);
-o-transform: translate(15vw, 0px) scale(.33);
transform: translate(15vw, 0px) scale(.33);
}
.flag-star:nth-child(5) {
-webkit-transform: translate(11vw,0px) scale(.33) rotate(-45deg);
-moz-transform: translate(11vw,0px) scale(.33) rotate(-45deg);
-ms-transform: translate(11vw,0px) scale(.33) rotate(-45deg);
-o-transform: translate(11vw,0px) scale(.33) rotate(-45deg);
transform: translate(11vw,0px) scale(.33) rotate(-45deg);
/*-webkit-transform: matrix(.33, 0, 0, .33, 100, 0);*/
}
</style>
</head>
<body>
<div class="flag">
<div class="flag-star"></div>
<div class="flag-star"></div>
<div class="flag-star"></div>
<div class="flag-star"></div>
<div class="flag-star"></div>
</div>
</body>
</html>
