祝祖国母亲生日快乐-HTML+CSS实现五星红旗

小小九天

于 2024-10-01 12:51:35 发布

阅读量313

点赞数 11

文章标签： html css 前端

本文链接：https://blog.csdn.net/as1278/article/details/142669893

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            border-width: 0;
        }

        html,
        body {
            padding: 0;
            margin: 0;
            padding-top: 30px
        }

        :root {
            --width: 30vw;
            --height: calc(var(--width) * 2 / 3);
            --bg-color: #f40002;
            --star-color: #faf408;
            --grid: calc(var(--height) / 2 / 10);
            --radius: calc(var(--grid) * 3);
            --sin18: 0.3090169943749474;
            --cos18: 0.9510565162951535;
            --tan36: 0.7265425280053608;
            --OL: calc(var(--radius) * var(--sin18));
            --EL: calc(var(--radius) * var(--cos18));
            --GL: calc(var(--EL) * var(--tan36));
        }

        .flag {
            position: relative;
            margin: 0 auto;
            width: var(--width);
            height: var(--height);
            background: var(--bg-color);
        }

        .star-five-big {
            position: absolute;
            top: calc(5 * var(--grid) - var(--OL));
            left: calc(5 * var(--grid) - var(--EL));
            width: 0;
            height: 0;
            border-color: var(--star-color) transparent transparent;
            border-width: var(--GL) var(--EL);
            border-style: solid;
        }

        .star-five-big::before {
            position: absolute;
            top: calc(var(--GL) * -1);
            left: calc(var(--EL) * -1);
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-color: var(--star-color) transparent transparent;
            border-width: var(--GL) var(--EL);
            border-style: solid;
            transform: rotate(72deg);
            transform-origin: var(--EL) var(--OL);
        }

        .star-five-big::after {
            position: absolute;
            top: calc(var(--GL) * -1);
            left: calc(var(--EL) * -1);
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-color: var(--star-color) transparent transparent;
            border-width: var(--GL) var(--EL);
            border-style: solid;
            transform: rotate(-72deg);
            transform-origin: var(--EL) var(--OL);
        }

        .star-five-small {
            position: absolute;
            width: 0;
            height: 0;
            border-color: var(--star-color) transparent transparent;
            border-width: calc(var(--GL) / 3) calc(var(--EL) / 3);
            border-style: solid;
            transform-origin: calc(var(--EL) / 3) calc(var(--OL) / 3);
        }

        .star-five-small::before {
            position: absolute;
            top: calc(var(--GL) * -1 / 3);
            left: calc(var(--EL) * -1 / 3);
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-color: var(--star-color) transparent transparent;
            border-width: calc(var(--GL) / 3) calc(var(--EL) / 3);
            border-style: solid;
            transform: rotate(72deg);
            transform-origin: calc(var(--EL) / 3) calc(var(--OL) / 3);
        }

        .star-five-small::after {
            position: absolute;
            top: calc(var(--GL) * -1 / 3);
            left: calc(var(--EL) * -1 / 3);
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-color: var(--star-color) transparent transparent;
            border-width: calc(var(--GL) / 3) calc(var(--EL) / 3);
            border-style: solid;
            transform: rotate(-72deg);
            transform-origin: calc(var(--EL) / 3) calc(var(--OL) / 3);
        }

        .one {
            top: calc(2 * var(--grid) - var(--OL) / 3);
            left: calc(10 * var(--grid) - var(--EL) / 3);
            transform: rotate(-48.96deg);
        }

        .two {
            top: calc(4 * var(--grid) - var(--OL) / 3);
            left: calc(12 * var(--grid) - var(--EL) / 3);
            transform: rotate(-26.13deg);
        }

        .three {
            top: calc(7 * var(--grid) - var(--OL) / 3);
            left: calc(12 * var(--grid) - var(--EL) / 3);
            transform: rotate(-2.06deg);
        }

        .four {
            top: calc(9 * var(--grid) - var(--OL) / 3);
            left: calc(10 * var(--grid) - var(--EL) / 3);
            transform: rotate(20.66deg);
        }
    </style>
</head>

<body>
    <div class="flag">
        <div class="star-five-big"></div>
        <div class="star-five-small one"></div>
        <div class="star-five-small two"></div>
        <div class="star-five-small three"></div>
        <div class="star-five-small four"></div>
    </div>
</body>

</html>

预览 | 下载

五星红旗下载

感谢各位的阅读，更多文章请前往九天小窝。