麻烦老师检查下 总感觉不对

来源:2-8 编程练习

张凤梅

2020-01-21 13:40:03

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>2-3</title>
    <style type="text/css">
        /* 此处写代码*/
        .container{
            width: 500px;
            height: 300px;
            background-color:red;
            margin: auto;
            position:relative;
        }
        .diva{
            left:50px;top: 70px;
            position: absolute;
            width: 0;height: 0;
            border-left:50px solid transparent;
            border-right:50px solid transparent;
            border-bottom:35px solid yellow;
            transform:rotate(35deg);
        }
        .diva:before{
            content:"";
            position: absolute;
            left:-50px;top: 0;
            width: 0;height: 0;
            border-left:50px solid transparent;
            border-right:50px solid transparent;
            border-bottom:35px solid yellow;
            transform:rotate(-70deg);
        }
        .diva:after{
            content:"";
            position: absolute;
            left:-35px;top:-28px;
            width: 0;height: 0;
            border-left: 20px solid transparent;
            border-right:20px solid transparent;
            border-bottom:55px solid yellow;
            transform:rotate(-35deg);
        }
        .div2{
            transform:scale(0.3) rotate(50deg);
            left: 150px;top: 20px;
        }
        .div3{
            transform:scale(0.3) rotate(-50deg);
            left:180px;top: 50px;
        }
        .div4{
            transform: scale(0.3) rotate(40deg);
            left:180px;top:90px;
        }
        .div5{
            transform: scale(0.3) rotate(50deg);
            left: 150px;top:120px;
        }
    </style>
</head>
<body>
    <!-- 此处写代码 -->
    <div class="container">
        <div class="div1 diva"></div>
        <div class="div2 diva"></div>
        <div class="div3 diva"></div>
        <div class="div4 diva"></div>
        <div class="div5 diva"></div>
    </div>
</body>
</html>


写回答

1回答

好帮手慕粉

2020-01-21

同学你好,代码效果实现的是可以的。继续加油,祝学习愉快~

0

0 学习 · 40143 问题

查看课程