2-13 编程练习提交

来源：2-13 编程练习

我在浪费钱

2021-09-02 04:17:36

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>2-3</title>
    <style type="text/css">
        /* 此处写代码*/
        h1,
        h2 {
            text-align: center;
        }

        /* 伪类堆叠实现 */
        .vn-flag1 {
            width: 800px;
            height: 400px;
            background-color: rgb(218, 37, 29);
            position: relative;
            margin: 0 auto;
            margin-bottom: 100px;
        }

        .vn-flag1 .stars {
            position: absolute;
            left: 369px;
            top: 243px;
            border: 30px solid transparent;
            border-top: 20px solid yellow;
            transform: scale(4);
        }

        .vn-flag1 .stars::before {
            content: "";
            position: absolute;
            left: -44px;
            top: -30px;
            border: 30px solid transparent;
            border-top: 20px solid yellow;
            transform: rotate(70deg);
        }

        .vn-flag1 .stars::after {
            content: "";
            position: absolute;
            left: -18px;
            top: -30px;
            border: 30px solid transparent;
            border-top: 20px solid yellow;
            transform: rotate(292deg);
        }

        /* div堆叠实现 */
        .vn-flag2 {
            width: 800px;
            height: 400px;
            background-color: rgb(218, 37, 29);
            position: relative;
            margin: 0 auto;
        }

        .vn-flag2 .stars-contain {
            position: absolute;
            left: 56%;
            top: 93%;
            margin-top: -200px;
        }

        .vn-flag2 .stars-contain .stars {
            /* 根据五角星的宽高粗略计算得出 */
            width: 110px;
            height: 143px;
            position: relative;
            transform: scale(3);
        }

        .vn-flag2 .stars-contain .stars div {
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 40px solid rgb(255, 255, 0);
            position: absolute;
        }

        .vn-flag2 .stars-contain .stars .top {
            top: -2px;
            left: 1px;
        }

        .vn-flag2 .stars-contain .stars .left {
            transform: rotate(296deg);
            top: 20px;
            left: -28px;
        }

        .vn-flag2 .stars-contain .stars .right {
            transform: rotate(-296deg);
            top: 20px;
            left: 28px;
        }

        .vn-flag2 .stars-contain .stars .left-bottom {
            transform: rotate(219deg);
            top: 56px;
            left: -17px;
        }

        .vn-flag2 .stars-contain .stars .right-bottom {
            transform: rotate(140deg);
            top: 56px;
            left: 19px;
        }
    </style>
</head>

<body>
    <!-- 此处写代码 -->
    <h1><del>我觉得好麻烦呃，做越南国旗可以吗？</del></h1>
    <h2>伪类堆叠实现</h2>
    <div class="vn-flag1">
        <div class="stars"></div>
    </div>

    <h2>div堆叠实现<del>低配廉价越南国旗</del></h2>
    <div class="vn-flag2">
        <div class="stars-contain">
            <div class="stars">
                <div class="top"></div>
                <div class="left"></div>
                <div class="right"></div>
                <div class="left-bottom"></div>
                <div class="right-bottom"></div>
            </div>
        </div>
    </div>
</body>

</html>