老师请问这样可以吗

相关代码：

<!DOCTYPE html>问题描述：
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .gq{width: 3000px;
        height: 2000px;
        background-color: red;}
        .sjx1{
            position: relative;
            top: 100px;
            left: 100px;

        }
        .sjx2{
            position: relative;
            top: 100px;
            left: 200px;
        }
        .sjx3{
            position: relative;
            top: 100px;
            left: 300px;
        }
        .sjx4{
            position: relative;
            top: 100px;
            left: 400px;
        }
        .sjx5{
            position: relative;
            top: 100px;
            left: 500px;
        }
        .a{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(5deg);
        position: absolute;
        top: 150px;
        left: 480px;
        }
        .b{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(-62deg);
        position: absolute;
        top: 150px;
        left: 480px;
        }
        .c{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(-280deg);
        position: absolute;
        top: 150px;
        left: 480px;
        }
        .h{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(20deg);
        position: absolute;
        top: 350px;
        left: 600px;
        }
        .i{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(-47deg);
        position: absolute;
        top: 350px;
        left: 600px;
        }
        .j{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(-265deg);
        position: absolute;
        top: 350px;
        left: 600px;
        }
        .k{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(50deg);
        position: absolute;
        top: 660px;
        left: 550px;
        }
        .l{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(-20deg);
        position: absolute;
        top: 660px;
        left: 550px;
        }
        .m{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(-239deg);
        position: absolute;
        top: 660px;
        left: 550px;
        }
        .n{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(50deg);
        position: absolute;
        top: 900px;
        left: 250px;
        }
        .o{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(-20deg);
        position: absolute;
        top: 900px;
        left: 250px;
        }
        .p{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(-239deg);
        position: absolute;
        top: 900px;
        left: 250px;
        }
        .e{width: 0px;
        height: 0px;
        border-right: 250px solid transparent ;
        border-left: 250px solid transparent;
        border-bottom: 175px solid yellow;
        transform: rotate(35deg);
        position: absolute;
        top:  350px;
        left: -20px;
        }
        .f{width: 0px;
        height: 0px;
        border-right: 250px solid transparent ;
        border-left: 250px solid transparent;
        border-bottom: 175px solid yellow;
        transform: rotate(-34deg);
        position: absolute;
        top:  350px;
        left: -20px;
        }
        .g{width: 0px;
        height: 0px;
        border-right: 250px solid transparent ;
        border-left: 250px solid transparent;
        border-bottom: 175px solid yellow;
        transform: rotate(-253deg);
        position: absolute;
        top:  350px;
        left: -20px;
        }
    </style>
</head>
<body>
    <div class="gq">
        <div class="sjx1">
            <div class="e"></div>
            <div class="f"></div>
            <div class="g"></div>
        </div>
        <div class="sjx2">
            <div class="a"></div>
            <div class="b"></div>
            <div class="c"></div>
        </div>
        <div class="sjx3">
            <div class="h"></div>
            <div class="i"></div>
            <div class="j"></div>
        </div>
        <div class="sjx4">
            <div class="k"></div>
            <div class="l"></div>
            <div class="m"></div>
        </div>
        <div class="sjx5">
            <div class="n"></div>
            <div class="o"></div>
            <div class="p"></div>
        </div>
    </div>


</body>
</html>

问题描述：

不太明白五角星怎么弄，还有伪元素是怎么使用

kongpain 2021-05-29

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

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2021-05-30 11:19:24

同学你好，五角星实现是可以的，但是每个元素设置的有些大了，水平方向上有滚动条

建议再调整小一些。

另外伪元素是子元素，和a是兄弟关系

如果改变a的旋转角度，两个伪元素位置不变

自己再测试下，祝学习愉快！

收起回答

好帮手慕久久 2021-05-29 11:39:48

同学你好，五角星就是通过三角形拼接而成的：

同学这样写是可以的，只是代码太冗余了。五个五角星，形状是一模一样的，只是各自的位置、旋转角度不一样，因此可以将形状样式复用，再设置不同的旋转角度和位置即可，例如：

样式参考如下（重写样式）：

其中common1、common2、common3的样式是复用的同学的，sjx1~sjx3的位置、大小调整合适即可（数值自定义）。

可以把伪元素看成特殊的标签，伪元素与普通标签的区别在于它的结构不会真实存在于html结构中，即不需要提前在html中将其结构写出来，通过样式就能让其显示。可以把common2、common3换成伪元素，例如：

样式需要注意的是，伪元素必须设置content属性才行：

利用伪元素，可以简化html结构，比如上述代码，html中就少写了两个div。

祝学习愉快！

收起回答

提问者 kongpain #1

请问做成这样可以吗？伪元素一定要是上一层的父盒子吗？我试了下a的伪元素，会导致更改a的角度和距离的时候会带着两个伪元素一起变化

2021-05-30 00:31:26
提问者 kongpain #2

<style>
        .gq {
            width: 3000px;
            height: 2000px;
            background-color: red;
        }

        .a {
            width: 0px;
            height: 0px;
            border-right: 100px solid transparent;
            border-left: 100px solid transparent;
            border-bottom: 70px solid yellow;
            transform: rotate(-35deg);
            position: absolute;
        }

        .wjx::before {
            content: "";
            width: 0px;
            height: 0px;
            border-right: 100px solid transparent;
            border-left: 100px solid transparent;
            border-bottom: 70px solid yellow;
            transform: rotate(32deg);
            position: absolute;
        }

        .wjx::after {
            content: "";
            width: 0px;
            height: 0px;
            border-right: 100px solid transparent;
            border-left: 100px solid transparent;
            border-bottom: 70px solid yellow;
            transform: rotate(250deg);
            position: absolute;
        }

        .wjx {
            position: relative;
        }

        .wjx1 {
            transform: translateX(480px) translateY(-220px) rotate(-15deg);

        }

        .wjx2 {

            transform: translateX(500px) translateY(-150px) rotate(-20deg);
        }

        .wjx3 {

            transform: translateX(400px) translateY(1250px) rotate(20deg);
        }

        .wjx4 {

            transform: translateX(550px) translateY(800px) rotate(10deg);
        }

        .wjx5 {
            transform: scale(1.8)  translate(700px) translateY(200px);

        }
    </style>
</head>

<body>
    <div class="gq">
        <div class="wjx1 wjx">
            <div class="a com"></div>
        </div>
        <div class="wjx2 wjx">
            <div class="a com"></div>
        </div>
        <div class="wjx3 wjx">
            <div class="a com"></div>
        </div>
        <div class="wjx4 wjx">
            <div class="a com"></div>
        </div>
        <div class="wjx5 wjx">
            <div class="a com"></div>
        </div>
    </div>
</body>

</html>

2021-05-30 00:32:00