慕ou老师请看下~~~

来源：2-13 编程练习

我不是胖球球

2021-04-25 10:02:33

昨天在慕ou老师的指点下画出来了，但是自己始终觉得太冗杂了，重复调用样式。老师有什么简洁的方法吗？我自己试过放弃重复调用样式，用旋转缩放来实现，但是后一个始终会覆盖前一个，不知道怎么解决？

相关代码：

<!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;
        }

        .other-common {
            width: 0;
            height: 0;
            border: 56px solid transparent;
            border-bottom: 40px solid yellow;
        }

        .bd .bd-common .box1 {
            margin-left: 37px;
            transform: rotate(38deg);
        }

        .bd .bd-common .box2 {
            margin-left: 39px;
            transform-origin: -109px 49px;
            transform: rotate(-37deg);
        }

        .bd .bd-common .box3 {
            margin-left: 30px;
            transform-origin: -27px -19px;
            transform: rotate(255deg);
        }

        .bd .bd2 {
            transform: translate(7px, -374px) scale(0.3) rotate(40deg);
            ;
        }

        .bd .bd3 {
            transform: translate(29px, -627px) scale(0.3) rotate(33deg);
        }

        .bd .bd4 {
            transform: translate(23px, -876px) scale(0.3) rotate(33deg);
        }

        .bd .bd5 {
            transform: translate(10px, -1124px) scale(0.3) rotate(33deg);
        }
    </style>
</head>

<body>
    <!-- 此处写代码 -->
    <div class="bd">
        <div class="bd-common bd1">
            <div class="box1 other-common"></div>
            <div class="box2 other-common"></div>
            <div class="box3 other-common"></div>
        </div>

        <div class="bd-common bd2">
            <div class="box1 other-common"></div>
            <div class="box2 other-common"></div>
            <div class="box3 other-common"></div>
        </div>

        <div class="bd-common bd3">
            <div class="box1 other-common"></div>
            <div class="box2 other-common"></div>
            <div class="box3 other-common"></div>
        </div>

        <div class="bd-common bd4">
            <div class="box1 other-common"></div>
            <div class="box2 other-common"></div>
            <div class="box3 other-common"></div>
        </div>

        <div class="bd-common bd5">
            <div class="box1 other-common"></div>
            <div class="box2 other-common"></div>
            <div class="box3 other-common"></div>
        </div>


    </div>
</body>

</html>