老师，五角星怎么画，不会。。。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .mai{
            width: 600px;
            height: 350px;
            margin: 0 auto;
            background-color: red;
            position: relative;
        }
        .star{
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 50px solid yellow;
            position: absolute;
        }
        .div1{
            top: 60px;
            left: 100px;
        }
        .div2{
            top: 105px;
            left: 145px;
            transform:rotate(90deg);
        }
        .div3{
            top: 156px;
            left: 116px;
            transform:rotate(150deg);
        }
        .div4{
            top: 154px;
            left: 56px;
            transform:rotate(214deg);
        }
        .div5{
            top: 95px;
            left: 47px;
            transform:rotate(-80deg);
        }
    </style>
</head>
<body>
    <div class="mai">
        <div class="star div1"></div>
        <div class="star div2"></div>
        <div class="star div3"></div>
        <div class="star div4"></div>
        <div class="star div5"></div>
    </div>
</body>
</html>

画出来是这种。。。

qq_陌_45 2018-03-17

源自：CSS3转换 2-9 编程练习

收起

2回答

樱桃小胖子 2018-03-18 11:27:13

你的代码大体的思路已经有了，在详细调整一下即可

希望可以帮到你~

收起回答

提问者 qq_陌_45 #1

老师，使用了transform:rotate就不能用transform: translate了吗，用了移动在用旋转发现会让移动无效了

2018-03-18 14:05:41
樱桃小胖子回复提问者 qq_陌_45 #2

transform的属性值遵循一定的书写顺序，可参考：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);希望可以帮到你~

2018-03-19 09:41:58