其他分享
首页 > 其他分享> > css3+html画五星红旗

css3+html画五星红旗

作者:互联网

半个,还差一点,但是我懒

用边框写的,绝对定位,然后写好一个,其他的写旋转缩放去网页调整到合适位置


    <style>
        {
            margin: 0;
            padding: 0;
        }
        section {
            width: 600px;
            height: 400px;
            background-color: red;
            margin: 0 auto;
            position: relative;
            margin: 30px auto;
        }
        div{
            width: 0;
            height: 0;
            border-top: yellow solid 30px;
            border-left: transparent solid 50px;
            border-right: transparent solid 50px;
            position: absolute;
            margin-top: 40px;
            margin-left: 40px;
        }
        div::before {
            content: '';
            width: 0;
            height: 0;
            border-top: yellow solid 30px;
            border-left: transparent solid 50px;
            border-right: transparent solid 50px;
            transform: rotate(72.5deg);
            display: block;
            margin-left: -49px;
            margin-top: -28px;
        }

        div::after {
            content: '';
            width: 0;
            height: 0;
            border-top: yellow solid 30px;
            border-left: transparent solid 50px;
            border-right: transparent solid 50px;
            transform: rotate(-72.5deg);
            display: block;
            margin-left: -50px;
            margin-top: -28px;
        }

        .x2 {
            margin-top: 13px;
            margin-left: 127px;
            transform: rotate(22deg) scale(0.25);
        }

    </style>


//html
<body>
<section class="hong">
    <div class="x1"></div>
    <div class="x2"></div>
    <div class="x3"></div>
    <div class="x4"></div>
    <div class="x5"></div>
</section>
</body>
</html>

标签:css3,solid,margin,top,50px,五星红旗,html,border,left
来源: https://www.cnblogs.com/zongkm/p/15730145.html