通過數學模型用CSS繪制以色列國旗

以色列國旗長度為220厘米X160厘米，白色背景。兩條25厘米寬的水平藍色條紋放在距邊緣15厘米處。大衛之盾由兩個相交的等邊三角形組成，位於旗幟的中央。它的高度為69厘米，每邊長60厘米，寬度為5.5厘米。條紋和星星的顏色范圍可以從藍色到耶魯藍色。“大衛盾”在旗幟中與四方邊沿等距。

初步觀察到，繪制這個圖案的重點在於中間的六芒星，藍色邊框以內陰影來實現。代表“大衛盾”的六芒星的外接圓圓心位於旗幟的幾何中心。旗幟中的白、藍相間效果可以通過線性漸變來實現。

根據六芒星幾何圖形的性質：六芒星可以通過一個等邊三角形AHI通過繞其外心O旋轉60°、120°、180°、240°、300°后所共同組成的圖形獲得。這也是CSS繪制鏤空三角形組合成為六芒星的原理。

難點在於構成“大衛盾”的基礎鏤空三角形的繪制。

構建數學模型：

六芒星ABCDEF中，O為其外接圓圓心，過O做BF的垂線，垂足為G。根據幾何圖形的性質，G為BF的中點，並且BO為∠DBF的角平分線。設六芒星的外接圓半徑為R。

OG=0.5R

GB=√3 ·R/2

而BF=2GB

即R=√3/3 ·BF

OG=√3/6 ·BF

GD=√3/2 ·BF

設計尺寸：旗幟主體寬440px，高320px，那么BF=120px

GD=103.9230px,OG=34.6410px

滿足大衛盾的要求需要是△ARS進行旋轉，△MTU為內部填充白色，相對於△ARS進行絕對定位，這樣就構成了基礎的類似三條等寬、等長線段構成的三角形。(W為構成大衛盾的條紋寬度值)

△ARS的高為：H=AG+W

H=34.6410+11=45.6410

邊長的一半RS/2為：HG+W/√3

HG=0.5HI

HI=BF/3

所以

HG+W/√3= BF/6 + （W/√3）=20+6.3508=26.3508

旋轉基點坐標: 26.3508    69.2820

對於內部填充△MTU進行相關數據計算：

過T做△ARS的兩邊的垂線，垂足為G1和F1，G1T=TF1=11

RF1=√3 TF1=√3·11=19.0525

構成小三角形底邊的一半值UT/2:

RS/2  - RF1=26.3508 -19.0525=7.2983

△MTU的高：

H=√3·7.2983=12.6410

△MTU絕對定位的數據：

水平方向：7.2983

垂直方向：AM=RT=2TF1

AM=2W=22

最后是對“大衛盾”進行定位。

外接圓圓心的坐標（220,160）

轉換三角形的絕對定位坐標距離：

水平方向 220-26.3508=193.6492

垂直方向 160-R=160-69.2820=90.7179

水平方向距離：

HTML代碼：

    <div class='flag'>
        <div class='star'>

        </div>
        <div class='star'>

        </div>
        <div class='star'>

        </div>
        <div class='star'>

        </div>
        <div class='star'>

        </div>
        <div class='star'>

        </div>
    </div>

　　CSS代碼：

  * {
            border-width: 0;
        }

        .flag {
            width: 440px;
            height: 320px;
            background: linear-gradient(0deg, white 0, white 6.8181%, blue 6.8181%, blue 18.1818%, white 0, white 81.8181%, blue 0, blue 93.1818%, white 0, white 100%);
            position: relative;

        }

        .star {

            width: 0;
            height: 0;
            border-bottom: 45.6410px solid #0138b9;
            border-left: 26.3508px solid transparent;
            border-right: 26.3508px solid transparent;
            position: absolute;
            transform-origin: 26.3508px 69.2820px;
            top:90.7179px;
            left:193.6492px;
        }

        .star:before {
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-bottom: 12.6410px solid white;
            border-left: 7.2983px solid transparent;
            border-right: 7.2983px solid transparent;
            position: absolute;
            left: -7.2983px;
            top: 22px;
        }

        .flag .star:nth-child(2) {
            transform: rotate(-60deg);
        }

        .flag .star:nth-child(3) {
            transform: rotate(-120deg);
        }

        .flag .star:nth-child(4) {
            transform: rotate(-180deg);
        }

        .flag .star:nth-child(5) {
            transform: rotate(-240deg);
        }

        .flag .star:nth-child(6) {
            transform: rotate(-300deg);
        }

實現效果較為理想：