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

通過數學模型CSS繪製捷克國旗

按照要求捷克國旗:

1、捷克國旗呈長方形,長寬之比為3:2。旗面由藍、白、紅三色組成。

2、構成旗幟中,左側為藍色等腰三角形。右側是兩個相等的梯形,上白下紅。

3、在用CSS繪製時,旗幟長度為300px。

分析:這個圖形相當於CSS繪製三角形的一個簡單變種,採用border進行實現三角形,超出部分為元素的寬度值。

構建數學模型:

矩形ABCD代表整個設計旗面大小,AB=300,AC=200,△AEC為代表藍色的等邊三角形。過E點作AC的垂線,與AC相交於I,與BD相交於F。過E做AC的平行線,與AB相交於G,與DC相交於H。

根據數學幾何知識,可以求IE、GE、EH的值(構建三角形的數學值):

IE=√3·AC/2=173.205

GE=EH=100

根據初始設計,還需要GB的值。

GB=AB-AG

AG= IE

即GB=300-173.205=126.795

相關色標:藍色#11457e,紅色#d7141a,白色#ffffff。

HTML程式碼:

<div class="flag"></div>

  

CSS程式碼:

    * {
            border-width: 0;
        }

        .flag {
            width: 126.795px;
            height: 0px;
            background: #de2910;
            border-left:173.205px solid #11457e ;
            border-top:100px solid #ffffff;
            border-bottom:100px solid #d7141a;
        }