通过数学模型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;
        }