请老师帮忙修改作业 不太会

来源:2-13 编程练习

划过天空阿忠

2020-11-25 10:12:51

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

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

       .bg {

           height400px;

           width600px;

           backgroundred;

           margin0 auto;

           position:relative;

       } 

       .bg .star1 .box1 {

           width0;

           height0;

           border50px solid transparent;

           border-top-coloryellow;

           position:absolute;

           left:50px;

           top:50px;

       }

       

       .bg .star1 .box2 {

           width0;

           height0;

           border50px solid transparent;

           border-left-coloryellow;

           transform:rotate(73deg);

           position:absolute;

           left:50px;

           top:50px;

       }

       .bg .star1 .box3 {

           width0;

           height0;

           border50px solid transparent;

           border-left-coloryellow;

           transform:rotate(142deg);

           position:absolute;

           left:50px;

           top:50px;

       }

    </style>

</head>

<body>

    <div class="bg">

        <div class="star1">

            <div class="box1"></div>

            <div class="box2"></div>

            <div class="box3"></div>

        </div>

        <div class="star2">

            <div class="box1"></div>

            <div class="box2"></div>

            <div class="box3"></div>

        </div>

        <div class="star3">

            <div class="box1"></div>

            <div class="box2"></div>

            <div class="box3"></div>

        </div>

        <div class="star4">

            <div class="box1"></div>

            <div class="box2"></div>

            <div class="box3"></div>

        </div>

        <div class="star5">

            <div class="box1"></div>

            <div class="box2"></div>

            <div class="box3"></div>

        </div>

    </div>

</body>

</html>


写回答

1回答

好帮手慕久久

2020-11-25

同学你好,五角星可以由三个div组成,每个div通过设置边框形成三角形,再旋转、移动拼接成五角星即可。具体实现可参考如下例子:

http://img.mukewang.com/climg/5fbdcd3d094365a404980167.jpghttp://img.mukewang.com/climg/5fbdcd71097100e607430369.jpghttp://img.mukewang.com/climg/5fbdcda009e8b38607000538.jpg

http://img.mukewang.com/climg/5fbdcda809ed176306550366.jpg

http://img.mukewang.com/climg/5fbdcdfd09b78f5516000500.jpg
其余几颗星也是这样实现,同学自己尝试写一下。
祝学习愉快!

0

0 学习 · 15276 问题

查看课程