五角星位置的计算相关

首页课程实战体系课手记专栏慕课教程

五角星位置的计算相关

来源：2-13 编程练习

精慕门7067107

2023-04-29 14:38:21

大五角星移动到红旗上合适的位置并且使其距离左边和上边等距该如何计算？

还有其他四个小五角星的摆放位置该如何计算？

写回答

1回答

好帮手慕久久

2023-05-01

同学你好，不需要做这种复杂计算，没意义。同学微调一下各个数据，看着效果合适就可以了，这里主要练习微调css样式中的值。

各个五角星基础样式是相同的，只是个别样式不同，微调个别样式即可，比如：

<!DOCTYPE HTML>
<html>

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

        /*将整体移动到合适为止 */
        .flag {
            width: 300px;
            height: 200px;
            background-color: rgb(218, 37, 29);
            position: relative;
            margin: auto;
        }

        /* 设置五角星(样式公用) */
        .flag .star {
            position: absolute;
            left: 30px;
            top: 50px;
            border: 30px solid transparent;
            border-top: 20px solid yellow;
        }

        .flag .star::before {
            /* 左右位置也通过微调确定，效果合适就行 */
            left: -44px;
            top: -30px;
            content: "";
            position: absolute;
            border: 30px solid transparent;
            border-top: 20px solid yellow;
            /* 旋转角度，合适就行了，自己调整 */
            transform: rotate(70deg);
        }

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

        /* 所有五角星基础样式相同，只是大小、位置、旋转角度不同 */
        .flag .two {
            /*微调每一个小星星的角度、位置、大小*/
            left: 80px;
            top: 10px;
            transform: rotate(25deg) scale(0.4);
        }

        .flag .three {
            left: 100px;
            top: 30px;
            transform: rotate(45deg) scale(0.4);
        }

        .flag .four {
            left: 100px;
            top: 60px;
            transform: rotate(65deg) scale(0.4);
        }

        .flag .five {
            left: 80px;
            top: 80px;
            transform: rotate(85deg) scale(0.4);
        }
    </style>
</head>

<body>
    <!-- 此处写代码 -->
    <div class="flag">
        <div class="star one"></div>
        <div class="star two"></div>
        <div class="star three"></div>
        <div class="star four"></div>
        <div class="star five"></div>
    </div>
</body>

</html>

祝学习愉快！

0 学习 · 17877 问题

查看课程

相似问题

如何制作五角星

回答 2

回答 1

老师，可以具体讲一下五角星怎么拼

回答 1

绝对定位的下移右移尺寸和旋转角度的具体数值是怎么得来的？是谷歌后台反复调试的数值得来吗

回答 1

元素A围绕元素B旋转时的偏移量设置问题

回答 3

打开慕课网App查看更多内容