老师五角星图案怎么弄？

相关代码：

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

        .father {
            width: 300px;
            height: 200px;
            background-color: red;
            margin: 0 auto;
            position: relative;

        }

        .father>.wjx {
            position: absolute;
            background-color: yellow;
            width: 50px;
            height: 50px;
            content: '★';
            position: absolute;
            top: 40px;
            left: 40px;
        }

        .star1 .wjx{
            background-color: yellow;
            width: 20px;
            height: 20px;
            content: '★';
            position: absolute;
        }

        .star2{
            top: -30px;
            left: 80px;
            transform: rotate(45deg);
        }

        .star3{
            top: 0px;
            left: 105px;
            transform: rotate(60deg);
        }

        .star4{
            top: 30px;
            left: 105px;
            transform: rotate(60deg);
        }

        .star5{
            top: 60px;
            left: 80px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <!-- 此处写代码 -->
    <div class="father">
        <div class="wjx star1">
            <div class="wjx star2"></div>
            <div class="wjx star3"></div>
            <div class="wjx star4"></div>
            <div class="wjx star5"></div>
        </div>

    </div>
</body>
</html>

问题描述：

老师五角星图案该怎么弄？还有代码中的content:'★’没有用吗？
所以只能弄成这样了

相关截图：

刘徽 2023-08-01

源自：2D与3D转换 2-13 编程练习

收起

1回答

好帮手慕久久回答被采纳获得+3积分 2023-08-01 13:17:22

同学你好，解答如下：

利用border属性，可以得到三角形形状。一个五角星可以由三个三角形拼接而来，这样就需要由三个元素来制作三个三角形，此时::before和::after伪元素可以代替两个真实元素来制作三角形，代码看起来更清晰；然后给所有的五角星调整位置和大小；

参考代码如下：

<!DOCTYPE HTML>
<html>
 
<head>
    <meta charset="utf-8">
    <title>2-3</title>
    <style type="text/css">
        /* 国旗背景 */
        .vn-flag {
            width: 600px;
            height: 400px;
            background-color: rgb(218, 37, 29);
            position: relative;
            margin: 0 auto;
        }
 
        /* 绘制第一个三角形 */
        .vn-flag .stars {
            position: absolute;
            left: 90px;
            top: 120px;
            border: 30px solid transparent;
            border-top: 20px solid yellow;
 
        }
 
        /* 绘制第二个三角形，并调整位置 */
        .vn-flag .stars::before {
            content: "";
            position: absolute;
            left: -44px;
            top: -30px;
            border: 30px solid transparent;
            border-top: 20px solid yellow;
            transform: rotate(70deg);
        }
 
        /* 绘制第三个三角形，并调整位置，与其它两个三角形正好拼接成一个五角星 */
        .vn-flag .stars::after {
            content: "";
            position: absolute;
            left: -18px;
            top: -30px;
            border: 30px solid transparent;
            border-top: 20px solid yellow;
            transform: rotate(292deg);
        }
 
        /* 调整第一个五角星的位置和大小 */
        .vn-flag .one {
            transform: scale(1.8);
        }
 
        /* 调整第二个五角星的位置和大小 */
        .vn-flag .two {
            left: 180px;
            top: 30px;
            transform: rotate(25deg) scale(0.6);
        }
 
        /* 调整第三个五角星的位置和大小 */
        .vn-flag .three {
            left: 220px;
            top: 80px;
            transform: rotate(45deg) scale(0.6);
        }
 
        /* 调整第四个五角星的位置和大小 */
        .vn-flag .four {
            left: 220px;
            top: 130px;
            transform: rotate(65deg) scale(0.6);
        }
 
        /* 调整第五个五角星的位置和大小 */
        .vn-flag .five {
            left: 180px;
            top: 180px;
            transform: rotate(85deg) scale(0.6);
        }
    </style>
</head>
 
<body>
    <div class="vn-flag">
        <!-- 大五角星 -->
        <div class="stars one"></div>
        <!-- 四个小五角星 -->
        <div class="stars two"></div>
        <div class="stars three"></div>
        <div class="stars four"></div>
        <div class="stars five"></div>
    </div>
</body>
 
</html>

这里算是一个小技巧，同学当成思路扩展，尝试理解就行。

祝学习愉快！

收起回答

雪山凌狐 #1

太巧妙了！我竟然没想到可以用三个三角形组成一个五角星！

2024-03-06 23:32:06
好帮手慕久久回复雪山凌狐 #2

编程的时候，需要思考，它和日常生活其实也是相关的。数学知识、生活常识、奇思妙想等，都可以用到编程中，别局限了思路。
习题中，老师出了很多这样的小练习，同学们尽量都看看，有的很好玩。

2024-03-07 09:24:40
雪山凌狐回复好帮手慕久久 #3

赞！·~~~~~~~

2024-03-07 18:53:40