求老师指点！

来源：2-13 编程练习

我不是胖球球

2021-04-24 16:50:06

老师好！用5个三角形画出来应该五角星之后，其他四个小星星应该怎么实现？好像也可以用三个三角形来实现五角星？大星星缩小之后原本的大星星也会变小到新的位置上，求老师指点！

相关代码：

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>2-3</title>
    <style type="text/css">
        /* 此处写代码*/
        * {
            padding-top: 0;
            margin: 0;
        }

        .bd {
            width: 300px;
            height: 200px;
            background-color: red;
            margin: 30px auto;
        }

        .bd .bd1 .box1 {
            width: 0;
            height: 0;
            border: 15px solid transparent;
            border-bottom: 40px solid yellow;
            margin-left: 30px;
        }

        .bd .bd1 .box2 {
            width: 0;
            height: 0;
            border: 15px solid transparent;
            border-bottom: 40px solid yellow;
            margin-left: 30px;
            transform-origin: 56px 26px;
            transform: rotate(67deg);
        }

        .bd .bd1 .box3 {
            width: 0;
            height: 0;
            border: 15px solid transparent;
            border-bottom: 40px solid yellow;
            margin-left: 30px;
            transform-origin: 32px -2px;
            transform: rotate(146deg);
        }

        .bd .bd1 .box4 {
            width: 0;
            height: 0;
            border: 15px solid transparent;
            border-bottom: 40px solid yellow;
            margin-left: 30px;
            transform-origin: -106px -29px;
            transform: rotate(-69deg);
        }

        .bd .bd1 .box5 {
            width: 0;
            height: 0;
            border: 15px solid transparent;
            border-bottom: 40px solid yellow;
            margin-left: 30px;
            transform-origin: -18px -57px;
            transform: rotate(-146deg);
        }

        .bd .bd2 {
            transform: rotate(45deg);
        }
    </style>
</head>

<body>
    <!-- 此处写代码 -->
    <div class="bd">
        <div class="bd1">
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
            <div class="box4"></div>
            <div class="box5"></div>
        </div>
        <div class="bd2"></div>
        <div class="bd3"></div>
        <div class="bd4"></div>
        <div class="bd5"></div>
    </div>
</body>

</html>