请问老师关于五角星的计算

请问老师这个这个五角星的思路我知道怎么做但是不清楚老师这个五角星每个三角形的translate平移量和rotate角度应该如何计算出来。我看别的同学都写出来了，想请教老师一下。因为我使用了translate属性平移了三角之后三角形还是围绕以前的也就是平移之前的基准点(几何中心)进行旋转。我想请问老师具体如何计算出这个三角形水平和垂直方向的偏移量才能刚好得分一个平均分的五角星。想了一下午没想通，自己也调了一下午动不动就是五角星一边长一边短的得到的虽然是五角星但是每个边长短不一。希望可以得到老师的指点

hy_wang 2018-05-14

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

收起

2回答

Tsuki_tsuki 2018-05-14 17:10:28

这个题我也是看了一下问答的各种答案，还有1楼同学的图然后才有了点思路做出来的……

如果是说是想问怎样得到一个平均分的五角星，大概是这个思路：

五角星由三个一样大小的三角形拼出来的；
这三个三角形中有一个三角形的边框数值和另外两个相反；
蓝色三角形和黄色三角形通过旋转等操作刚好有一个角重合（右下角）；
粉色三角形旋转后保证有一条边和黄三角形水平的那条边在一条水平线上，顶点和黄蓝两个三角形的交点（大概左上那个位置）重合；
最后就是各种调试位置什么的……= =|||

其他四个五角星就用缩放实现，然后调位置就好……具体可以参考网上绘制五星红旗的尺寸标准什么的……

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>2-7</title>
    <style type="text/css">
        /* 此处写代码*/
        body{
            margin: 0;
            padding: 0;
        }
        .flag{
            margin: 50px;
            width: 450px;
            height: 300px;
            background-color: red;
            position: relative;
        }
        .star{
            top:25px;
            left: 50px;
            position: absolute;
            width:0;
            height:0;
            border-top:45px solid transparent;
            border-right:30px solid transparent;
            border-bottom:45px solid transparent;
            border-left:30px solid yellow;
            transform: rotate(-54deg);
     
        }
 
        .star::before{
            top:-54px;
            left:-60px;
            content: "";
            position: absolute;
            width:0;
            height:0;
            border-top:45px solid transparent;
            border-right:30px solid blue;
            border-bottom:45px solid transparent;
            border-left:30px solid transparent;
            transform: rotate(34deg);
        }
        .star::after{
            top:-46px;
            left:-56px;
            content: "";
            position: absolute;
            width:0;
            height:0;
            border-top:30px solid transparent;
            border-right:45px solid transparent;
            border-bottom:30px solid  pink;
            border-left:45px solid transparent;
            transform: rotate(20deg);
        }
        .s1{
             
            left:125px;
            top:-5px;
            -webkit-transform:scale(0.4) rotate(30deg);
             
        }
        .s2{
             
            left:165px;
            top:20px;
            -webkit-transform:scale(0.4) rotate(-10deg);
             
        }
        .s3{
             
            left:165px;
            top:75px;
            -webkit-transform:scale(0.4) rotate(15deg);
             
        }
        .s4{
             
            left:125px;
            top:108px;
            -webkit-transform:scale(0.4) rotate(30deg);
 
    </style>
</head>
<body>
    <!-- 此处写代码 -->
    <div class="flag">
        <div class="star"></div>
        <div class="star s1"></div>
        <div class="star s2"></div>
        <div class="star s3"></div>
        <div class="star s4"></div>
    </div>
     
</body>
</html>