通過數學模型CSS繪製捷克國旗
阿新 • • 發佈:2020-12-16
按照要求捷克國旗:
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; }