zoukankan      html  css  js  c++  java
  • CSS五星红旗的制作

    效果:

    css样式

    <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            section{
                 300px;
                height: 200px;
                background-color: red;
                margin: 50px auto;
            }
            .contain{
                 30px;
                height: 30px;
                position: relative;
            }
            .star{
                 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;
                 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;
                 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;
            }
        </style>
     
     

    html内容:

    <body>
    <section>
    <div class="contain">
    <div class="star small small1"></div>
    </div>
    <div class="contain">
    <div class="star big"></div>
    </div>
    <div class="contain">
    <div class="star small small2"></div>
    </div>
    <div class="contain">
    <div class="star small small3"></div>
    </div>
    <div class="contain">
    <div class="star small small4"></div>
    </div>
    </section>
     
     
    </body>
  • 相关阅读:
    nrf51822蓝牙芯片ble_app_proximity程序总结
    创新学分材料
    毕业论文 一定要自己写 切记不可抄袭​
    Shell awk 求标准差
    Java程序执行Linux命令(JSP运行其他程序)
    SFTP无法连接 Connection closed by server with exitcode 127
    IE开发人员工具手册
    jQuery plugins
    Google maps api demo 2
    Google maps api demo
  • 原文地址:https://www.cnblogs.com/gao7/p/10973727.html
Copyright © 2011-2022 走看看