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>
  • 相关阅读:
    Unity给力插件之MegaFiers
    序列化存档之备忘脚本
    09 Spring Cloud的集群保护框架Hystrix
    08 在Spring Cloud中使用Feign
    07 REST客户端
    06 RestTemplate负载均衡
    05 第一个Ribbon程序
    04 Ribbon介绍
    01 在IDEA的同一目录下创建多个项目
    03 Eureka集群的搭建
  • 原文地址:https://www.cnblogs.com/gao7/p/10973727.html
Copyright © 2011-2022 走看看