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