找回密码
当前位置：前端开发者 > CSS > 正文

前端开发纯CSS_画基本图形

2018-07-09 分类：CSS 阅读(741) 评论(0)
前端开发如何规范css|前端开发需要学哪个css框架|后盾网一元课堂 html div css 网站前端开发实战
纯css画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）,
    里面很多涉及到CSS3的一些属性
    1、正方形 css代码如下： square {
        width: 100px;
        height: 100px;
        background: red;
    }
    2、长方形 css代码如下： rectangle {
        width: 200px;
        height: 100px;
        background: red;
    }
    3、圆形 CSS代码如下： circle {
        width: 100px;
        height: 100px;
        background: red;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }
    4、椭圆 CSS代码如下： oval {
        width: 200px;
        height: 100px;
        background: red;
        -moz-border-radius: 100px / 50px;
        -webkit-border-radius: 100px / 50px;
        border-radius: 100px / 50px;
    }
    5、上三角 CSS代码如下： triangle-up {
        width: 0;
        height: 0;
        border-left: 50pxsolidtransparent;
        border-right: 50pxsolidtransparent;
        border-bottom: 100pxsolidred;
    }
    6、下三角 CSS代码如下： triangle-down {
        width: 0;
        height: 0;
        border-left: 50pxsolidtransparent;
        border-right: 50pxsolidtransparent;
        border-top: 100pxsolidred;
    }
    7、左三角 CSS代码如下： triangle-left {
        width: 0;
        height: 0;
        border-top: 50pxsolidtransparent;
        border-right: 100pxsolidred;
        border-bottom: 50pxsolidtransparent;
    }
    8、右三角 CSS代码如下： triangle-right {
        width: 0;
        height: 0;
        border-top: 50pxsolidtransparent;
        border-left: 100pxsolidred;
        border-bottom: 50pxsolidtransparent;
    }
    9、左上三角 CSS代码如下： triangle-topleft {
        width: 0;
        height: 0;
        border-top: 100pxsolidred;
        border-right: 100pxsolidtransparent;
    }
    10、右上三角 CSS代码如下： triangle-topright {
        width: 0;
        height: 0;
        border-top: 100pxsolidred;
        border-left: 100pxsolidtransparent;
    }
    11、左下三角 CSS代码如下： triangle-bottomleft {
        width: 0;
        height: 0;
        border-bottom: 100pxsolidred;
        border-right: 100pxsolidtransparent;
    }
    12、右下三角 CSS代码如下： triangle-bottomright {
        width: 0;
        height: 0;
        border-bottom: 100pxsolidred;
        border-left: 100pxsolidtransparent;
    }
    13、平行四边形 CSS代码如下： parallelogram {
        width: 150px;
        height: 100px;
        margin-left: 20px;
        -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
        background: red;
    }
    14、梯形 CSS代码如下： trapezoid {
        border-bottom: 100pxsolidred;
        border-left: 50pxsolidtransparent;
        border-right: 50pxsolidtransparent;
        height: 0;
        width: 100px;
    }
    15、六角星 CSS代码如下： star-six {
        width: 0;
        height: 0;
        border-left: 50pxsolidtransparent;
        border-right: 50pxsolidtransparent;
        border-bottom: 100pxsolidred;
        position: relative;
    }
    star-six:after {
        width: 0;
        height: 0;
        border-left: 50pxsolidtransparent;
        border-right: 50pxsolidtransparent;
        border-top: 100pxsolidred;
        position: absolute;
        content: ”;
        top: 30px;
        left: -50px;
    }
    16、五角星 CSS代码如下： star-five {
        margin: 50px0;
        position: relative;
        display: block;
        color: red;
        width: 0px;
        height: 0px;
        border-right: 100pxsolidtransparent;
        border-bottom: 70pxsolidred;
        border-left: 100pxsolidtransparent;
        -moz-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
    }
    star-five:before {
        border-bottom: 80pxsolidred;
        border-left: 30pxsolidtransparent;
        border-right: 30pxsolidtransparent;
        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: 100pxsolidtransparent;
        border-bottom: 70pxsolidred;
        border-left: 100pxsolidtransparent;
        -webkit-transform: rotate(-70deg);
        -moz-transform: rotate(-70deg);
        -ms-transform: rotate(-70deg);
        -o-transform: rotate(-70deg);
        content: ”;
    }
    17、五角大楼 CSS代码如下： pentagon {
        position: relative;
        width: 54px;
        border-width: 50px18px0;
        border-style: solid;
        border-color: redtransparent;
    }
    pentagon:before {
        content: ”;
        position: absolute;
        height: 0;
        width: 0;
        top: -85px;
        left: -18px;
        border-width: 045px35px;
        border-style: solid;
        border-color: transparenttransparentred;
    }
    18、六边形 CSS代码如下： hexagon {
        width: 100px;
        height: 55px;
        background: red;
        position: relative;
    }
    hexagon:before {
        content: ”;
        position: absolute;
        top: -25px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 50pxsolidtransparent;
        border-right: 50pxsolidtransparent;
        border-bottom: 25pxsolidred;
    }
    hexagon:after {
        content: ”;
        position: absolute;
        bottom: -25px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 50pxsolidtransparent;
        border-right: 50pxsolidtransparent;
        border-top: 25pxsolidred;
    }
    19、八角形 CSS代码如下： octagon {
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
    }
    octagon:before {
        content: ”;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: 29pxsolidred;
        border-left: 29pxsolid#eee;
        border-right: 29pxsolid#eee;
        width: 42px;
        height: 0;
    }
    octagon:after {
        content: ”;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 29pxsolidred;
        border-left: 29pxsolid#eee;
        border-right: 29pxsolid#eee;
        width: 42px;
        height: 0;
    }
    20、爱心 CSS代码如下： 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: 50px50px00;
        border-radius: 50px50px00;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0100%;
        -moz-transform-origin: 0100%;
        -ms-transform-origin: 0100%;
        -o-transform-origin: 0100%;
        transform-origin: 0100%;
    }
    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%;
    }
    21、无穷大符号 CSS代码如下： infinity {
        position: relative;
        width: 212px;
        height: 100px;
    }
    infinity:before,
    #infinity:after {
        content: ”;
        position: absolute;
        top: 0;
        left: 0;
        width: 60px;
        height: 60px;
        border: 20pxsolidred;
        -moz-border-radius: 50px50px050px;
        border-radius: 50px50px050px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    infinity:after {
        left: auto;
        right: 0;
        -moz-border-radius: 50px50px50px0;
        border-radius: 50px50px50px0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    22、鸡蛋 最终效果: CSS代码如下： egg {
        display: block;
        width: 126px;
        height: 180px;
        background-color: red;
        -webkit-border-radius: 63px63px63px63px / 108px108px72px72px;
        border-radius: 50%50%50%50% / 60%60%40%40%;
    }
    23、食逗人（Pac-Man） CSS代码如下： pacman {
        width: 0px;
        height: 0px;
        border-right: 60pxsolidtransparent;
        border-top: 60pxsolidred;
        border-left: 60pxsolidred;
        border-bottom: 60pxsolidred;
        border-top-left-radius: 60px;
        border-top-right-radius: 60px;
        border-bottom-left-radius: 60px;
        border-bottom-right-radius: 60px;
    }
    24、提示对话框 CSS代码如下： talkbubble {
        width: 120px;
        height: 80px;
        background: red;
        position: relative;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
    talkbubble:before {
        content: ”;
        position: absolute;
        right: 100%;
        top: 26px;
        width: 0;
        height: 0;
        border-top: 13pxsolidtransparent;
        border-right: 26pxsolidred;
        border-bottom: 13pxsolidtransparent;
    }
    25、12角星 CSS代码如下： burst-12 {
        background: red;
        width: 80px;
        height: 80px;
        position: relative;
        text-align: center;
    }
    burst-12:before,
    #burst-12:after {
        content: ”;
        position: absolute;
        top: 0;
        left: 0;
        height: 80px;
        width: 80px;
        background: red;
    }
    burst-12:before {
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        -o-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    burst-12:after {
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        -o-transform: rotate(60deg);
        transform: rotate(60deg);
    }
    26、8角星 CSS代码如下： burst-8 {
        background: red;
        width: 80px;
        height: 80px;
        position: relative;
        text-align: center;
        -webkit-transform: rotate(20deg);
        -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
        -o-transform: rotate(20eg);
        transform: rotate(20deg);
    }
    burst-8:before {
        content: ”;
        position: absolute;
        top: 0;
        left: 0;
        height: 80px;
        width: 80px;
        background: red;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    27、钻石 CSS代码如下： cut-diamond {
        border-style: solid;
        border-color: transparenttransparentredtransparent;
        border-width: 025px25px25px;
        height: 0;
        width: 50px;
        position: relative;
        margin: 20px050px0;
    }
    cut-diamond:after {
        content: ”;
        position: absolute;
        top: 25px;
        left: -25px;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: redtransparenttransparenttransparent;
        border-width: 70px50px050px;
    }
    28、阴阳八卦（霸气的这个） CSS代码如下： yin-yang {
        width: 96px;
        height: 48px;
        background: #eee;
        border-color: red;
        border-style: solid;
        border-width: 2px2px50px2px;
        border-radius: 100%;
        position: relative;
    }
    yin-yang:before {
        content: ”;
        position: absolute;
        top: 50%;
        left: 0;
        background: #eee;
        border: 18pxsolidred;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }
    yin-yang:after {
        content: ”;
        position: absolute;
        top: 50%;
        left: 50%;
        background: red;
        border: 18pxsolid#eee;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }
web前端开发技术 html css javascript|css前端开发基础视频教程|前端css开发软件
赞(0)
前端开发者 » 前端开发纯CSS_画基本图形
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论