css3画国旗

  • 五角星的画法: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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容