纯css画出的图形——html5

来源：互联网发布：中国古代史网络课答案编辑：程序博客网时间：2024/05/17 07:44
复制下面代码，保存为.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>        <div id="square">        </div>    </p>    <p>        <div id="rectangle">        </div>    </p>    <p>        <div id="circle">        </div>    </p>    <p>        <div id="oval">        </div>    </p>    <p>        <div id="triangle-up">        </div>    </p>    <p>        <div id="triangle-down">        </div>    </p>    <p>        <div id="triangle-left">        </div>    </p>    <p>        <div id="triangle-right">        </div>    </p>    <p>        <div id="triangle-topleft">        </div>    </p>    <p>        <div id="triangle-topright">        </div>    </p>    <p>        <div id="triangle-leftbottom">        </div>    </p>    <p>        <div id="parallelogram">        </div>    </p>    <p>        <div id="trapezoid">        </div>    </p>    <p>        <div id="star-six">        </div>    </p>    <p>        <div id="star-five">        </div>    </p>    <p>        <div id="yin-yang">        </div>    </p></body></html>
用支持Html5的浏览器firefox,chrome，IE9等打开