纯css画出的图形――html5

时间2024-01-25 12:18:27发布访客分类HTML浏览457

导读：收集整理的这篇文章主要介绍了html5教程-纯css画出的图形――html5，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。复制下面代码，保存为....

收集整理的这篇文章主要介绍了html5教程-纯css画出的图形――html5，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

复制下面代码，保存为.html格式

[htML]
html>
head>
/head>
style tyPE="text/css">
    #square
    {
        width: 100px;
        height: 100px;
        background: red;
    }
    #rectangle
    {
        width: 200px;
        height: 100px;
        background: red;
    }
    #circle
    {
        width: 100px;
        height: 100px;
        background: red;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }
    #oval
    {
        width: 200px;
        height: 100px;
        background: red;
        -moz-border-radius: 100px/50px;
        -webkIT-border-radius: 100px/50px;
        border-radius: 100px/50px;
    }
    #triangle-up
    {
        width: 0px;
        height: 0px;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }
    #triangle-down
    {
        width: 0px;
        height: 0px;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
    }
    #triangle-left
    {
        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-right: 100px solid red;
    }
    #triangle-right
    {
        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 100px solid red;
    }
    #triangle-topleft
    {
        width: 0px;
        height: 0px;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
    }
    #triangle-toPRight
    {
        width: 0px;
        height: 0px;
        border-top: 100px solid red;
        border-left: 100px solid transparent;
    }
    #triangle-leftbottom
    {
        width: 0px;
        height: 0px;
        border-bottom: 100px solid red;
        border-right: 100px solid transparent;
    }
    #triangle-rightbottom
    {
        width: 0px;
        height: 0px;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;
    }
    #paralleLOGram
    {
        width: 150px;
        height: 100px;
        margin-left: 20px;
        -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
    }
    #trapezoid
    {
        border-bottom: 100px solid red;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        height: 0;
        width: 100px;
    }
    #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: 100x solid red;
        position: absolute;
        content: "";
        top: 30px;
        left: -50px;
    }
    #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: '';
    }
    #yin-yang
    {
        width: 96px;
        height: 48px;
        background: #eee;
        border-color: red;
        border-style: solid;
        border-width: 2px 2px 50px 2px;
        border-radius: 100%;
        position: relative;
    }

    #yin-yang:before
    {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        background: #eee;
        border: 18px solid red;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }

    #yin-yang:after
    {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: red;
        border: 18px solid #eee;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }
/style>
body>
    p>
        p id="square">
        /p>
    /p>
    p>
        p id="rectangle">
        /p>
    /p>
    p>
        p id="circle">
        /p>
    /p>
    p>
        p id="oval">
        /p>
    /p>
    p>
        p id="triangle-up">
        /p>
    /p>
    p>
        p id="triangle-down">
        /p>
    /p>
    p>
        p id="triangle-left">
        /p>
    /p>
    p>
        p id="triangle-right">
        /p>
    /p>
    p>
        p id="triangle-topleft">
        /p>
    /p>
    p>
        p id="triangle-topright">
        /p>
    /p>
    p>
        p id="triangle-leftbottom">
        /p>
    /p>
    p>
        p id="parallelogram">
        /p>
    /p>
    p>
        p id="trapezoid">
        /p>
    /p>
    p>
        p id="star-six">
        /p>
    /p>
    p>
        p id="star-five">
        /p>
    /p>
    p>
        p id="yin-yang">
        /p>
    /p>
/body>
/html>

html>
head>
/head>
style type="text/css">
    #square
    {
        width: 100px;
        height: 100px;
        background: red;
    }
    #rectangle
    {
        width: 200px;
        height: 100px;
        background: red;
    }
    #circle
    {
        width: 100px;
        height: 100px;
        background: red;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }
    #oval
    {
        width: 200px;
        height: 100px;
        background: red;
        -moz-border-radius: 100px/50px;
        -webkit-border-radius: 100px/50px;
        border-radius: 100px/50px;
    }
    #triangle-up
    {
        width: 0px;
        height: 0px;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }
    #triangle-down
    {
        width: 0px;
        height: 0px;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
    }
    #triangle-left
    {
        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-right: 100px solid red;
    }
    #triangle-right
    {
        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 100px solid red;
    }
    #triangle-topleft
    {
        width: 0px;
        height: 0px;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
    }
    #triangle-topright
    {
        width: 0px;
        height: 0px;
        border-top: 100px solid red;
        border-left: 100px solid transparent;
    }
    #triangle-leftbottom
    {
        width: 0px;
        height: 0px;
        border-bottom: 100px solid red;
        border-right: 100px solid transparent;
    }
    #triangle-rightbottom
    {
        width: 0px;
        height: 0px;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;
    }
    #parallelogram
    {
        width: 150px;
        height: 100px;
        margin-left: 20px;
        -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
    }
    #trapezoid
    {
        border-bottom: 100px solid red;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        height: 0;
        width: 100px;
    }
    #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: 100x solid red;
        position: absolute;
        content: "";
        top: 30px;
        left: -50px;
    }
    #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: '';
    }
    #yin-yang
    {
        width: 96px;
        height: 48px;
        background: #eee;
        border-color: red;
        border-style: solid;
        border-width: 2px 2px 50px 2px;
        border-radius: 100%;
        position: relative;
    }

    #yin-yang:before
    {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        background: #eee;
        border: 18px solid red;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }

    #yin-yang:after
    {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: red;
        border: 18px solid #eee;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }
/style>
body>
    p>
        p id="square">
        /p>
    /p>
    p>
        p id="rectangle">
        /p>
    /p>
    p>
        p id="circle">
        /p>
    /p>
    p>
        p id="oval">
        /p>
    /p>
    p>
        p id="triangle-up">
        /p>
    /p>
    p>
        p id="triangle-down">
        /p>
    /p>
    p>
        p id="triangle-left">
        /p>
    /p>
    p>
        p id="triangle-right">
        /p>
    /p>
    p>
        p id="triangle-topleft">
        /p>
    /p>
    p>
        p id="triangle-topright">
        /p>
    /p>
    p>
        p id="triangle-leftbottom">
        /p>
    /p>
    p>
        p id="parallelogram">
        /p>
    /p>
    p>
        p id="trapezoid">
        /p>
    /p>
    p>
        p id="star-six">
        /p>
    /p>
    p>
        p id="star-five">
        /p>
    /p>
    p>
        p id="yin-yang">
        /p>
    /p>
/body>
/html>

用支持Html5的浏览器firefox,chrome，IE9等打开

分享到：

复制下面代码，保存为.html格式

[html]
html>
head>
/head>
style type="text/css">
    #square
    {
        width: 100px;
        height: 100px;
        background: red;
    }
    #rectangle
    {
        width: 200px;
        height: 100px;
        background: red;
    }
    #circle
    {
        width: 100px;
        height: 100px;
        background: red;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }
    #oval
    {
        width: 200px;
        height: 100px;
        background: red;
        -moz-border-radius: 100px/50px;
        -webkit-border-radius: 100px/50px;
        border-radius: 100px/50px;
    }
    #triangle-up
    {
        width: 0px;
        height: 0px;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }
    #triangle-down
    {
        width: 0px;
        height: 0px;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
    }
    #triangle-left
    {
        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-right: 100px solid red;
    }
    #triangle-right
    {
        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 100px solid red;
    }
    #triangle-topleft
    {
        width: 0px;
        height: 0px;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
    }
    #triangle-topright
    {
        width: 0px;
        height: 0px;
        border-top: 100px solid red;
        border-left: 100px solid transparent;
    }
    #triangle-leftbottom
    {
        width: 0px;
        height: 0px;
        border-bottom: 100px solid red;
        border-right: 100px solid transparent;
    }
    #triangle-rightbottom
    {
        width: 0px;
        height: 0px;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;
    }
    #parallelogram
    {
        width: 150px;
        height: 100px;
        margin-left: 20px;
        -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
    }
    #trapezoid
    {
        border-bottom: 100px solid red;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        height: 0;
        width: 100px;
    }
    #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: 100x solid red;
        position: absolute;
        content: "";
        top: 30px;
        left: -50px;
    }
    #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: '';
    }
    #yin-yang
    {
        width: 96px;
        height: 48px;
        background: #eee;
        border-color: red;
        border-style: solid;
        border-width: 2px 2px 50px 2px;
        border-radius: 100%;
        position: relative;
    }

    #yin-yang:before
    {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        background: #eee;
        border: 18px solid red;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }

    #yin-yang:after
    {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: red;
        border: 18px solid #eee;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }
/style>
body>
    p>
        p id="square">
        /p>
    /p>
    p>
        p id="rectangle">
        /p>
    /p>
    p>
        p id="circle">
        /p>
    /p>
    p>
        p id="oval">
        /p>
    /p>
    p>
        p id="triangle-up">
        /p>
    /p>
    p>
        p id="triangle-down">
        /p>
    /p>
    p>
        p id="triangle-left">
        /p>
    /p>
    p>
        p id="triangle-right">
        /p>
    /p>
    p>
        p id="triangle-topleft">
        /p>
    /p>
    p>
        p id="triangle-topright">
        /p>
    /p>
    p>
        p id="triangle-leftbottom">
        /p>
    /p>
    p>
        p id="parallelogram">
        /p>
    /p>
    p>
        p id="trapezoid">
        /p>
    /p>
    p>
        p id="star-six">
        /p>
    /p>
    p>
        p id="star-five">
        /p>
    /p>
    p>
        p id="yin-yang">
        /p>
    /p>
/body>
/html>

用支持Html5的浏览器firefox,chrome，IE9等打开

分享到：

觉得可用，就经常来吧！欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

CSS div HTML html5 post-format-gallery

若转载请注明出处：纯css画出的图形――html5
本文地址： https://pptw.com/jishu/586505.html

Html5学习------canvas绘制径向渐变图形 Jellybean上relro引起的 SEGV