• 创新人才推进计划实施方案 2019-11-15
  • 礁石旅行地中国国家地理网 2019-11-09
  • 回复@海之宁:你的智商真滴不行!一边玩切…… 2019-11-04
  • 高清:高尔夫英国公开赛即将开赛 麦克罗伊召开赛前发布会 2019-11-04
  • 不仅是肌肉、技术比拼,更是精神PK,所以是文明人的战争。 2019-11-01
  • 次贷危机十年 防范金融危机还需做什么? 2019-10-27
  • 六问手机流量那些事:我的流量去哪儿了? 2019-10-26
  • 谁在倒卖用户个人信息?内鬼或是泄露主要渠道 2019-10-26
  • 第13期全人代第1回会議政協第13期全国委員会第1回会議 2019-10-23
  • 【理上网来·喜迎十九大】这五年,全面从严治党交出靓丽“赶考”答卷 2019-10-23
  • 抚州市12名处级干部正式任职 2019-10-17
  • 数读舆情:2017年中国人阅读了多少文字? 2019-10-17
  • [大笑]肯定要付钱啊!你个人占有属于大家的资源,就是一根针都得付钱,更何况是不可再生的土地? 2019-10-14
  • 【理上网来·喜迎十九大】人民军队的制胜之本力量之源 2019-10-07
  • [大笑]当然要付钱,你占用属于大家的资源,那怕是一根针都要付钱! 2019-10-05
  • 金葵设计—云南网站建设\网络推广\网络营销\品牌传输\软件开发知名设计!
    您当前的位置:云南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用户也可以直接对话)

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

    我们的联系方式:

    给我们留言:

    • 您贵姓:
    • 您手机*:
    • 设计内容:
    • 验证码:
  • 创新人才推进计划实施方案 2019-11-15
  • 礁石旅行地中国国家地理网 2019-11-09
  • 回复@海之宁:你的智商真滴不行!一边玩切…… 2019-11-04
  • 高清:高尔夫英国公开赛即将开赛 麦克罗伊召开赛前发布会 2019-11-04
  • 不仅是肌肉、技术比拼,更是精神PK,所以是文明人的战争。 2019-11-01
  • 次贷危机十年 防范金融危机还需做什么? 2019-10-27
  • 六问手机流量那些事:我的流量去哪儿了? 2019-10-26
  • 谁在倒卖用户个人信息?内鬼或是泄露主要渠道 2019-10-26
  • 第13期全人代第1回会議政協第13期全国委員会第1回会議 2019-10-23
  • 【理上网来·喜迎十九大】这五年,全面从严治党交出靓丽“赶考”答卷 2019-10-23
  • 抚州市12名处级干部正式任职 2019-10-17
  • 数读舆情:2017年中国人阅读了多少文字? 2019-10-17
  • [大笑]肯定要付钱啊!你个人占有属于大家的资源,就是一根针都得付钱,更何况是不可再生的土地? 2019-10-14
  • 【理上网来·喜迎十九大】人民军队的制胜之本力量之源 2019-10-07
  • [大笑]当然要付钱,你占用属于大家的资源,那怕是一根针都要付钱! 2019-10-05
  • 极速飞艇是官方的吗 足彩高手月入十万 BET365备用网址 上海时时乐方法技巧 3d胆拖投注价格表 彩票开奖东方6十1查询结果 腾讯分分彩定位胆技巧 百姓七星彩投注网站 2019088期双色球开奖结果64 FG游乐电子官方网 竞选足球胜平负直播 于海滨3d推荐号码今晚 极速赛车挂 王者 扑克二十一点技巧