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

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

  

原文地址:https://www.cnblogs.com/f6056/p/14145428.html