zoukankan      html  css  js  c++  java
  • 使用绝对定位实现五星红旗

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>五星红旗</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .main{
                width: 300px;
                height: 200px;
                background: #f00;
                padding: 20px;
            }
            .star{
                width: 0;
                height: 0;
                border-top: 10px solid yellow;
                border-left: 17.32px solid transparent;
                border-right: 17.32px solid transparent;
                margin-top: 20px;
                position: relative;
            }
            .star::before{
                content: "";
                display: block;
                width: 0;
                height: 0;
                border-top: 10px solid yellow;
                border-left: 17.32px solid transparent;
                border-right: 17.32px solid transparent;
                position: absolute;
                top: -10px;
                left: -17.32px;
                transform: rotate(74deg);
            }
            .star::after{
                content: "";
                display: block;
                width: 0;
                height: 0;
                border-top: 10px solid yellow;
                border-left: 17.32px solid transparent;
                border-right: 17.32px solid transparent;
                position: absolute;
                top: -10px;
                left: -17.32px;
                transform: rotate(147deg);
            }
            .big{
                transform: scale(1.8,1.8);
                position: absolute;
                top: 55px;
                left: 40px;
            }
            .small1,.small2,.small3,.small4{
                transform: rotate(-45deg) scale(0.7,0.7);
                position: absolute;
            }
            .small1{
                top: 10px;
                left: 80px;
            }
            .small2{
                top: 40px;
                left: 110px;
            }
            .small3{
                top: 80px;
                left: 110px;
            }
            .small4{
                top: 110px;
                left: 80px;
            }
        </style>      
    </head>
    <body>
        <div class="main">
            <div class="star big"></div>
            <div class="star small1"></div>
            <div class="star small2"></div>
            <div class="star small3"></div>
            <div class="star small4"></div>
        </div>
        
    </body>
    </html>

  • 相关阅读:
    网页打开微信链接 无法返回
    wap尝试调取app(网易新闻为例)
    兼容性
    图片旋转效果
    a标签发送邮件
    windows 下的bash 环境安装npm
    css 设置滚动条的样式
    前端h5遇到的问题及解决办法
    safari input默认样式
    delphi 新版内存表 FDMemTable
  • 原文地址:https://www.cnblogs.com/lyl-0667/p/10965795.html
Copyright © 2011-2022 走看看