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>
  • 相关阅读:
    JavaScript坑
    maven学习
    JAVA多线程和并发基础面试问答(转)
    Redis与Memcached的区别(一)
    poi生成execl综合
    POI操作Excel常用方法总结(转)
    java中在创建对象时候的初始化顺序
    [Java Web]敏感词过滤算法
    orcle导入导出
    js动态时间
  • 原文地址:https://www.cnblogs.com/gao7/p/10973727.html
Copyright © 2011-2022 走看看