通过CSS绘制五星红旗

任务要求：

1、创建一个div作为红旗旗面，用CSS控制其比例宽高比为3:2，背景为红色。

2、再创建五个小的div，用CSS控制其大小和位置。

3、用CSS同时控制每个小div的大小、边框和位置，同时配合旋转，使其与父元素组成五角星。

4、分别用CSS控制每个五角星的平移、旋转和缩放，直到五角星的大小、位置和方向均正确为止。

相关五角星大小和位置比例参见百度百科五星红旗国旗制法说明（墨线法）：

https://baike.baidu.com/item/%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD%E5%9B%BD%E6%97%97/240342?fromtitle=%E4%BA%94%E6%98%9F%E7%BA%A2%E6%97%97&fromid=21897&fr=aladdin

重点：（1）CSS绘制指定大小的五角星；（2）如何由五角星几何中心点位置获取元素div的大小以及相关元素旋转角度。（3）五角星几何中心（其外接圆圆心）满足墨线法绘制的位置要求。

tan18°=(√5-1)/√(10+2√5)≈0.32491969623291

0.5*tan18°=0.1624598481

绘制思路：

在进行相关代码书写前，先构建一个完整的数学模型，并计算相关尺寸数值。先设定旗面1/4中每格为10x10大小（px），那么旗面尺寸为300x200（px）。

大五角星外接圆半径R=30px，小五角星外接圆半径r=10px。根据CSS绘制五角星原理相关数学模型，可以计算出构成五角星的基础三角形中相关边框宽度的尺寸：

大五角星数据：

大五角星中构成三角形的边框宽度值：20.73px、28.53px、28.53px；

转换源基点数据：28.53px、9.27px；

外接圆圆心O坐标（50px，50px）转换为五角星的相对父元素上、左边距距离：垂直方向为40.73px，水平方向为21.47px。

小五角星数据：

小五角星中构成三角形的边框宽度值：6.91px、9.51px、9.51px；

转换源基点数据：9.51px、3.09px；

四个小五角星外接圆圆心转换为五角星的相对父元素上、左边距距离：

由于采用绝对定位方式，即外接圆圆心O（转换源基点）的坐标与初始三角形左上角点之间的距离差。

（1）（100px，20px）→（90.49px，16.91px）

（2）（120px，40px）→（110.49px，36.91px）

（3）（120px，70px）→（110.49px，66.91px）

（4）（100px，90px）→（90.49px，86.91px）

从上到下，小五角星转换为相对父元素上、下边距距离的数据值以及偏转角度（根据墨线法的方格和三角函数计算，前面值为计算经过小五角星的圆心与大五角星圆心的直线角度，后者为转换的偏转角度）依次为：

（1）arctan3/5≈30.96°→-48.96°

（计算过程：30.96+18=48.96，18°为五角星外部角的一半值）

（2）arctan1/7≈8.13°→-26.13°

（3）arctan2/7≈15.94°→-2.06°

（4）arctan4/5≈38.66°→20.66°

完整代码：

HTML结构

    <div class='flag'>
        <div class='pentagramMain'></div>
        <div class='pentagram one'></div>
        <div class='pentagram two'></div>
        <div class='pentagram three'></div>
        <div class='pentagram four'></div>
    </div>

CSS代码

        * {
            border-width: 0;
        }

        .flag {
            width:300px;
            height:200px;
            background:red;
            position:relative;

        }
        .pentagramMain{
            margin-top:40.73px;
            margin-left:21.47px;
            width: 0;
            height: 0;
            border-top-color: yellow;
            border-left-color: transparent;
            border-right-color: transparent;
            border-top-width: 20.73px;
            border-left-width: 28.53px;
            border-right-width: 28.53px;
            border-style: solid;
            position: absolute;
        }
        .pentagramMain::before {
            border-width:0;
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-top-color: yellow;
            border-left-color: transparent;
            border-right-color: transparent;
            border-top-width: 20.73px;
            border-left-width: 28.53px;
            border-right-width: 28.53px;
            border-style: solid;
            position:absolute;
            top:-20.73px;
            left:-28.53px;
            transform:rotate(72deg);
            transform-origin:28.53px  9.27px;
        }
        .pentagramMain::after{
            border-width:0;
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-top-color:yellow;
            border-left-color: transparent;
            border-right-color: transparent;
            border-top-width: 20.73px;
            border-left-width: 28.53px;
            border-right-width: 28.53px;
            border-style: solid;
            position:absolute;
            top:-20.73px;
            left:-28.53px;
            transform:rotate(-72deg);
            transform-origin:28.53px  9.27px;
        }

        /* 小五角星 */
        .pentagram{
            width:0;
            height:0;
            position:absolute;
            border-top:6.91px solid yellow;
            border-left:9.51px solid transparent;
            border-right:9.51px solid transparent;

        }
        .pentagram::before{
            position:absolute;
            width:0;
            height:0;
            content: '';
            display: block;
            border-top:6.91px solid yellow;
            border-left:9.51px solid transparent;
            border-right:9.51px solid transparent;
            top:-6.91px;
            left:-9.51px;
            transform:rotate(72deg);
            transform-origin:9.51px、3.09px; 

        }
        .pentagram::after{
            border-width:0;
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-top-color:yellow;
            border-left-color: transparent;
            border-right-color: transparent;
            border-top:6.91px solid yellow;
            border-left:9.51px solid transparent;
            border-right:9.51px solid transparent;
            border-style: solid;
            position:absolute;
            top:-6.91px;
            left:-9.51px;
            transform:rotate(-72deg);
            transform-origin:9.51px、3.09px;
        }
        .one{
            top:16.91px;
            left:90.49px;
            transform:rotate(-48.96deg);

        }
        .two{
            top:36.91px;
            left:110.49px;
            transform:rotate(-26.13deg);

        }
        .three{
            top:66.91px;
            left:110.49px;
            transform:rotate(-2.06deg);

        }
        .four{
            top:86.91px;
            left:90.49px;
            transform:rotate(20.66deg);
        }