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

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

美国国旗高度：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结构：

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规定我还不清楚，无法构建数学模型求值。