通过构建数学模型用CSS绘制美国星条旗

美国星条旗绘制比例示意图如下：

根据美国法典目录相关绘制比例资料数据：

美国国旗高度：A=1.0；

美国国旗宽度：B=1.9；

蓝色部分高度：C=0.5385（7/13,7条间纹的高度）；

蓝色部分宽度：D=0.76（1.9x2/5，五分之二的国旗宽度）；

E=F=0.0538(C/10，蓝色部分高度值的十分之一)；

G=H=0.0633(D/12,蓝色部分宽度值的十二分之一)；

五角星的外接圆直径：K=0.0616；

条纹的宽度：L=0.0769（1/13）；

星条旗CSS相关设计参数：

星条旗的色标值：蓝色#3c3b6e，红色#b22234；

初始设计宽度：宽760px，高400px。

由于旗帜的设计很多存在关联性比例关系，在设计时采用百分比数值。①蓝色部分大小与旗帜主体。②条纹高度与旗帜高度。（采用重复线性渐变）③E、F与C的高度④G、H与D的宽度值。⑤K与B的宽度值，推导K与D的值关系。

E=F=21.52px,G=H=25.32px

K与D的关系：K=0.0810526D；[77D/(19x50)]

K=24.64px;

根据绘制五角星的数学模型，构成五角星的基础三角形的内心坐标

垂直方向：K/2 ·sin18°

水平方向：Kcos18°

转换为具体数值：3.807px  11.717px

构成基础三角形的数学值：11.717px、11.717px 、8.512px。

计算过程：

R·cos18°=24.64·cos18°=11.717

  R·cos18°·tan36°=8.512

　　采用绝对定位星星序列与排数关系：

1-6为第一排，7-11为第二排，12-17为第三排，18-22为第四排，23-28为第五排，29-33为第六排，34-39为第七排，40-44为第八排，45-50为第九排

五角星相关位置理论计算：

第一排星星横坐标计算表格（由五角星外心位置推导理论上CSS定位数值）

Oh为数学几何上五角星外心距离基础三角形上边缘的垂直距离，即3.807px；

Ow为数学几何上五角星外心距离基础三角形上边缘边的距离的一半，即11.717px；

序列	1	2	3	4	5	6
公式	G-Ow	(G-Ow)+2H =3H-Ow	3H-Ow+2H =5H-Ow	(5H-Ow)+2H =7H-Ow	9H-Ow	9H-Ow
代数式	25.32-11.717	25.32x3-11.717	25.32x3-11.717	25.32x7-11.717	25.32x9-11.717	25.32x11-11.717
计算结果	13.603	64.243	114.883	165.523	216.163	266.803

第一排星星纵坐标：E-Oh

21.52px-3.807px=17.713px

第一排纵坐标：17.713px

横坐依次为：13.603px，64.243px，114.883px,165.523px,216.163px，266.803px

第二排星星横坐标计算表格（由五角星外心位置推导理论上CSS定位数值）

第一排星星纵坐标：E-Oh

21.52px-3.807px=17.713px

第一排纵坐标：17.713px

横坐依次为：13.603px，64.243px，114.883px,165.523px,216.163px，266.803px

第二排星星横坐标计算表格（由五角星外心位置推导理论上CSS定位数值）

序列	1	2	3	4	5
公式	G+H-Ow =2H-Ow	（2H-Ow）+2H=4H-Ow	6H-Ow	8H-Ow	10H-Ow
代数式	2x25.32-11.717	4x25.32-11.717	6x25.32-11.717	8x25.32-11.717	10x25.32-11.717
计算结果	38.923	89.563	140.203	190.843	241.483

 

第二排星星纵坐标：2F- Oh

2x21.52-3.807=39.233px

第二排星星横坐标：

38.923px，89.563px，140.203px，190.843px，241.483px

同理可得：

第三排星星纵坐标：3F- Oh

3x21.52-3.807=60.753px

第三排星星横坐标与第一排相同；

第四排星星纵坐标：4F- Oh

4x21.52-3.807=82.273px

第四排星星横坐标与第二排相同；

第五排星星纵坐标：5F- Oh

5x21.52-3.807=103.793px

第五排星星横坐标与第一排相同；

第六排星星纵坐标：6F- Oh

6x21.52-3.807=125.313px

第六排星星横坐标，与第二排相同；

第七排星星纵坐标：7F- Oh

7x21.52-3.807=146.833px

第七排星星横坐标，与第一排相同；

第八排星星纵坐标：8F- Oh

8x21.52-3.807=168.353px

第八排星星横坐标，与第二排相同；

第九排星星纵坐标：8F- Oh

9x21.52-3.807=189.873px

第九排星星横坐标，与第一排相同；

HTML结构：

    <div class='flag'>
        <div class='bluePart'>
            <div class='pentagram one'></div>
            <div class='pentagram one'></div>
            <div class='pentagram one'></div>
            <div class='pentagram one'></div>
            <div class='pentagram one'></div>
            <div class='pentagram one'></div>
            <div class='pentagram two'></div>
            <div class='pentagram two'></div>
            <div class='pentagram two'></div>
            <div class='pentagram two'></div>
            <div class='pentagram two'></div>
            <div class='pentagram three'></div>
            <div class='pentagram three'></div>
            <div class='pentagram three'></div>
            <div class='pentagram three'></div>
            <div class='pentagram three'></div>
            <div class='pentagram three'></div>
            <div class='pentagram four'></div>
            <div class='pentagram four'></div>
            <div class='pentagram four'></div>
            <div class='pentagram four'></div>
            <div class='pentagram four'></div>
            <div class='pentagram five'></div>
            <div class='pentagram five'></div>
            <div class='pentagram five'></div>
            <div class='pentagram five'></div>
            <div class='pentagram five'></div>
            <div class='pentagram five'></div>
            <div class='pentagram six'></div>
            <div class='pentagram six'></div>
            <div class='pentagram six'></div>
            <div class='pentagram six'></div>
            <div class='pentagram six'></div>
            <div class='pentagram seven'></div>
            <div class='pentagram seven'></div>
            <div class='pentagram seven'></div>
            <div class='pentagram seven'></div>
            <div class='pentagram seven'></div>
            <div class='pentagram seven'></div>
            <div class='pentagram eight'></div>
            <div class='pentagram eight'></div>
            <div class='pentagram eight'></div>
            <div class='pentagram eight'></div>
            <div class='pentagram eight'></div>
            <div class='pentagram nine'></div>
            <div class='pentagram nine'></div>
            <div class='pentagram nine'></div>
            <div class='pentagram nine'></div>
            <div class='pentagram nine'></div>
            <div class='pentagram nine'></div>
        </div>
    </div>

　　CSS代码：

        * {
            border-width: 0;
        }

        .flag {
            width: 760px;
            height: 400px;
            background: repeating-linear-gradient(#b22234 0, #b22234 7.692%, white 7.692%, white 15.3846%);
            position: relative;
        }

        /* 蓝色部分 */
        .bluePart {
            width: 40%;
            height: 53.846%;
            background: #3c3b6e;
            position: relative;
            /*    padding-top: 50px; */
        }


        /* 小五角星 */
        .pentagram {

            width: 0;
            height: 0;
            position: absolute;
            border-top: 8.51px solid white;
            border-left: 11.717px solid transparent;
            border-right: 11.717px solid transparent;
            /*        transform-origin: 23.434px 3.807px; */

        }

        .pentagram::before {
            position: absolute;
            width: 0;
            height: 0;
            content: '';
            display: block;
            border-top: 8.51px solid white;
            border-left: 11.717px solid transparent;
            border-right: 11.717px solid transparent;
            top: -8.51px;
            left: -11.717px;
            transform: rotate(-72deg);
            transform-origin: 11.717px 3.807px;
        }

        .pentagram::after {
            border-width: 0;
            position: absolute;
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-top: 8.51px solid white;
            border-left: 11.717px solid transparent;
            border-right: 11.717px solid transparent;
            top: -8.51px;
            left: -11.717px;
            transform: rotate(72deg);
            transform-origin: 11.717px 3.807px;
        }

        .one {
            top: 17.713px;

        }

        .two {
            top: 39.233px;
        }

        .three {
            top: 60.753px;
        }

        .four {
            top: 82.273px;
        }

        .five {
            top: 103.793px;
        }

        .six {
            top: 125.313px;
        }

        .seven {
            top: 146.833px
        }

        .eight {
            top: 168.353px;
        }

        .nine {
            top: 189.873px;
        }

        /* 1-6为第一排，7-11为第二排，12-17为第三排，18-22为第四排，23-28为第五排，29-33为第六排，34-39为第七排，40-44为第八排，45-50为第九排 */

        .bluePart div:nth-child(1),
        .bluePart div:nth-child(12),
        .bluePart div:nth-child(23),
        .bluePart div:nth-child(34),
        .bluePart div:nth-child(45) {
            left: 13.603px;
        }

        .bluePart div:nth-child(2),
        .bluePart div:nth-child(13),
        .bluePart div:nth-child(24),
        .bluePart div:nth-child(35),
        .bluePart div:nth-child(46) {
            left: 64.243px;

        }

        .bluePart div:nth-child(3),
        .bluePart div:nth-child(14),
        .bluePart div:nth-child(25),
        .bluePart div:nth-child(36),
        .bluePart div:nth-child(47) {
            left: 114.883px;

        }

        .bluePart div:nth-child(4),
        .bluePart div:nth-child(15),
        .bluePart div:nth-child(26),
        .bluePart div:nth-child(37),
        .bluePart div:nth-child(48) {
            left: 165.523px;
        }

        .bluePart div:nth-child(5),
        .bluePart div:nth-child(16),
        .bluePart div:nth-child(27),
        .bluePart div:nth-child(38),
        .bluePart div:nth-child(49) {
            left: 216.163px;
        }

        .bluePart div:nth-child(6),
        .bluePart div:nth-child(17),
        .bluePart div:nth-child(28),
        .bluePart div:nth-child(39),
        .bluePart div:nth-child(50) {
            left: 266.803px;
        }



        .bluePart div:nth-child(7),
        .bluePart div:nth-child(18),
        .bluePart div:nth-child(29),
        .bluePart div:nth-child(40) {
            left: 38.923px;
        }

        .bluePart div:nth-child(8),
        .bluePart div:nth-child(19),
        .bluePart div:nth-child(30),
        .bluePart div:nth-child(41) {
            left: 89.563px;
        }

        .bluePart div:nth-child(9),
        .bluePart div:nth-child(20),
        .bluePart div:nth-child(31),
        .bluePart div:nth-child(42) {
            left: 140.203px;
        }

        .bluePart div:nth-child(10),
        .bluePart div:nth-child(21),
        .bluePart div:nth-child(32),
        .bluePart div:nth-child(43) {
            left: 190.843px;
        }

        .bluePart div:nth-child(11),
        .bluePart div:nth-child(22),
        .bluePart div:nth-child(33),
        .bluePart div:nth-child(44) {
            left: 241.483px;
        }

　chrome浏览器中实现效果：

　

在chrome浏览器中的渲染效果已经比较理想实现了美国国旗的数学模型展示，但是由于浏览器对于小数部分数字的近似计算原因兼容问题，导致在火狐、UC等通过CSS采用数学模型数据绘制较小五角星时，构成的图案不太理想，代码仅仅在chrome下查看比较符合初始设计。较小的五角星尺寸，考虑兼容性可以使Unicode实心五角星：\2605。但是如何通过font-size来确定行高与五角星的外心坐标是个问题，相关CSS规定我还不清楚，无法构建数学模型求值。