1. 程式人生 > 實用技巧 >通過數學模型用CSS繪製以色列國旗

通過數學模型用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);
        }

實現效果較為理想: