• 4月17日上市配置丰富 起亚新智跑消息 2019-08-22
  • 夏天吃雪糕怕伤胃拉肚子 如何健康吃冷饮——食品安全频道——黄河新闻网 2019-08-20
  • 人民网驻日本记者报道集 2019-08-14
  • 中国中小企业协会“一带一路”工委会秋季行动计划——走进加拿大 2019-08-06
  • 古镇镇商会组织会员参观第十届香港国际春季灯饰展 2019-08-01
  • 中欧智库联手,推进中亚一带一路合作 2019-07-23
  • 刘大庆的专栏作者中国国家地理网 2019-07-19
  • 2018年度海军招飞定选录取6月14日全面启动 2019-07-19
  • 消费金融助力股份制银行“超车” 金融科技重塑银行业零售格局 2019-07-17
  • 德国队首战失利 夺冠热门缘何频频爆冷? 2019-07-16
  • 习近平两会“典”亮新时代 2019-07-16
  • 移动互联网时代下新闻报道叙事视角的研究 2019-07-14
  • 北京控股集团有限公司获第十二届人民企业社会责任奖年度环保奖 2019-07-14
  • 中国中小企业协会“一带一路”工委会宣传片 2019-07-13
  • 人民日报评论员:牢牢把握新时代中国共产党的历史使命 2019-07-09
  • 金葵设计—云南网站建设\网络推广\网络营销\品牌传输\软件开发知名设计!
    您当前的位置:云南11选5前三和值走势图 > 设计前沿 > 金葵博客

    纯 CSS 绘制图形

    云南11选5前三和值走势图 www.tri99.com 文章概述:

    我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。这篇文章给大家带来的是纯 CSS 绘制五角星、六角形、五边形、六边形、心…

    文章内容涵盖:

      我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。这篇文章给大家带来的是纯 CSS 绘制五角星、六角形、五边形、六边形、心形等等。

    Star (6-points)


    #star-six {

        width: 0;

        height: 0;

        border-left: 50px solid transparent;

        border-right: 50px solid transparent;

        border-bottom: 100px solid red;

        position: relative;

    }

    #star-six:after {

        width: 0;

        height: 0;

        border-left: 50px solid transparent;

        border-right: 50px solid transparent;

        border-top: 100px solid red;

        position: absolute;

        content: "";

        top: 30px;

        left: -50px;

    }



    Star (5-points)





    #star-five {

       margin: 50px 0;

       position: relative;

       display: block;

       color: red;

       width: 0px;

       height: 0px;

       border-right:  100px solid transparent;

       border-bottom: 70px  solid red;

       border-left:   100px solid transparent;

       -moz-transform:    rotate(35deg);

       -webkit-transform: rotate(35deg);

       -ms-transform:     rotate(35deg);

       -o-transform:      rotate(35deg);

    }

    #star-five:before {

       border-bottom: 80px solid red;

       border-left: 30px solid transparent;

       border-right: 30px solid transparent;

       position: absolute;

       height: 0;

       width: 0;

       top: -45px;

       left: -65px;

       display: block;

       content: '';

       -webkit-transform: rotate(-35deg);

       -moz-transform:    rotate(-35deg);

       -ms-transform:     rotate(-35deg);

       -o-transform:      rotate(-35deg);

     

    }

    #star-five:after {

       position: absolute;

       display: block;

       color: red;

       top: 3px;

       left: -105px;

       width: 0px;

       height: 0px;

       border-right: 100px solid transparent;

       border-bottom: 70px solid red;

       border-left: 100px solid transparent;

       -webkit-transform: rotate(-70deg);

       -moz-transform:    rotate(-70deg);

       -ms-transform:     rotate(-70deg);

       -o-transform:      rotate(-70deg);

       content: '';

    }



    Pentagon





    #pentagon {

        position: relative;

        width: 54px;

        border-width: 50px 18px 0;

        border-style: solid;

        border-color: red transparent;

    }

    #pentagon:before {

        content: "";

        position: absolute;

        height: 0;

        width: 0;

        top: -85px;

        left: -18px;

        border-width: 0 45px 35px;

        border-style: solid;

        border-color: transparent transparent red;

    }




     

    Hexagon




    #hexagon {

        width: 100px;

        height: 55px;

        background: red;

        position: relative;

    }

    #hexagon:before {

        content: "";

        position: absolute;

        top: -25px;

        left: 0;

        width: 0;

        height: 0;

        border-left: 50px solid transparent;

        border-right: 50px solid transparent;

        border-bottom: 25px solid red;

    }

    #hexagon:after {

        content: "";

        position: absolute;

        bottom: -25px;

        left: 0;

        width: 0;

        height: 0;

        border-left: 50px solid transparent;

        border-right: 50px solid transparent;

        border-top: 25px solid red;

    }



    Octagon




    #octagon {

        width: 100px;

        height: 100px;

        background: red;

        position: relative;

    }

     

    #octagon:before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        border-bottom: 29px solid red;

        border-left: 29px solid #eee;

        border-right: 29px solid #eee;

        width: 42px;

        height: 0;

    }

     

    #octagon:after {

        content: "";

        position: absolute;

        bottom: 0;

        left: 0;

        border-top: 29px solid red;

        border-left: 29px solid #eee;

        border-right: 29px solid #eee;

        width: 42px;

        height: 0;

    }



    Heart







    #heart {

        position: relative;

        width: 100px;

        height: 90px;

    }

    #heart:before,

    #heart:after {

        position: absolute;

        content: "";

        left: 50px;

        top: 0;

        width: 50px;

        height: 80px;

        background: red;

        -moz-border-radius: 50px 50px 0 0;

        border-radius: 50px 50px 0 0;

        -webkit-transform: rotate(-45deg);

           -moz-transform: rotate(-45deg);

            -ms-transform: rotate(-45deg);

             -o-transform: rotate(-45deg);

                transform: rotate(-45deg);

        -webkit-transform-origin: 0 100%;

           -moz-transform-origin: 0 100%;

            -ms-transform-origin: 0 100%;

             -o-transform-origin: 0 100%;

                transform-origin: 0 100%;

    }

    #heart:after {

        left: 0;

        -webkit-transform: rotate(45deg);

           -moz-transform: rotate(45deg);

            -ms-transform: rotate(45deg);

             -o-transform: rotate(45deg);

                transform: rotate(45deg);

        -webkit-transform-origin: 100% 100%;

           -moz-transform-origin: 100% 100%;

            -ms-transform-origin: 100% 100%;

             -o-transform-origin: 100% 100%;

                transform-origin :100% 100%;

    }


    原创文章请注明转载自云南11选5前三和值走势图-云南11选5前三和值走势图, 本文地址://www.tri99.com/article/show/169.aspx

    关键字:

    <上一篇

    今日云南11选5走势图:您可以直接点击下方按钮开始咨询,我们很高兴为您服务。
    (无QQ用户也可以直接对话)

    您好,请问需要设计服务吗!
    如有需要请联系

    我们的联系方式:

    给我们留言:

    • 您贵姓:
    • 您手机*:
    • 设计内容:
    • 验证码:
  • 4月17日上市配置丰富 起亚新智跑消息 2019-08-22
  • 夏天吃雪糕怕伤胃拉肚子 如何健康吃冷饮——食品安全频道——黄河新闻网 2019-08-20
  • 人民网驻日本记者报道集 2019-08-14
  • 中国中小企业协会“一带一路”工委会秋季行动计划——走进加拿大 2019-08-06
  • 古镇镇商会组织会员参观第十届香港国际春季灯饰展 2019-08-01
  • 中欧智库联手,推进中亚一带一路合作 2019-07-23
  • 刘大庆的专栏作者中国国家地理网 2019-07-19
  • 2018年度海军招飞定选录取6月14日全面启动 2019-07-19
  • 消费金融助力股份制银行“超车” 金融科技重塑银行业零售格局 2019-07-17
  • 德国队首战失利 夺冠热门缘何频频爆冷? 2019-07-16
  • 习近平两会“典”亮新时代 2019-07-16
  • 移动互联网时代下新闻报道叙事视角的研究 2019-07-14
  • 北京控股集团有限公司获第十二届人民企业社会责任奖年度环保奖 2019-07-14
  • 中国中小企业协会“一带一路”工委会宣传片 2019-07-13
  • 人民日报评论员:牢牢把握新时代中国共产党的历史使命 2019-07-09
  • 江西时时彩万能码 彩民彩票竞彩宝 pk10牛牛人工计划 917游戏通比牛牛假的很 365篮球比分 海南体育彩票飞鱼查询 七乐彩走势图列表 郑州福彩幸运武林 排列三走势图带连线南方双彩网 排列5电视开奖直播现场 甘肃十一选五专家推荐 今日体彩排列五藏机图 36选7最新开奖 6+1开奖结果 双色球走势图带连线