zoukankan      html  css  js  c++  java
  • 通过数学模型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;
            }
    

      

  • 相关阅读:
    安装HDP时的报错信息
    K-近邻(KNN)算法
    linux复杂命令
    azkaban报错记录
    azkaban的安装部署
    安装centOS后要解决的问题
    AI之微信跳一跳
    Python的lambda
    关于在vim中的查找和替换
    cdh6.3.2 hue集成hbase
  • 原文地址:https://www.cnblogs.com/f6056/p/14145428.html
Copyright © 2011-2022 走看看