DIV+CSS实现蚊香图形

偶然看见一盘蚊香,就想着能否用CSS实现,虽然步骤麻烦点。而且只能在IE9+,chrome,opera,safari,firfox等的较新版本上才能看见。旧版本浏览器看到的是方形的。某些手机浏览器看不见图演示地址

以下是源代码

<html>
    <head>
        <style>
            #up1{
                width:47px;
                height:25px;
                margin:1px 0 0 auto;
                border-style:solid;
                border-width:0;
                background:white;
                -moz-border-radius:50px 70px 0 20px;
                -webkit-border-radius:50px 70px 0 20px;
                border-radius:50px 70px 0 20px;
            }

            .up_semicircle {
                margin:10px auto 0 auto;
                border-style:solid;
                border-color:black;
                border-width:10px 10px 0 10px;
            }

            #up2 {
                width:50px;
                height:25px;
                background:black;
                -moz-border-radius:50px 50px 0 0;
                -webkit-border-radius:50px 50px 0 0;
                border-radius:50px 50px 0 0;
            }

            #up3 {
                width:90px;
                height:45px;
                -moz-border-radius:90px 90px 0 0;
                -webkit-border-radius:90px 90px 0 0;
                border-radius:90px 90px 0 0;
            }

            #up4 {
                width:130px;
                height:65px;
                -moz-border-radius:130px 130px 0 0;
                -webkit-border-radius:130px 130px 0 0;
                border-radius:130px 130px 0 0;
            }

            #up5 {
                width:170px;
                height:85px;
                -moz-border-radius:170px 170px 0 0;
                -webkit-border-radius:170px 170px 0 0;
                border-radius:170px 170px 0 0;
            }

            #down0 {
                width:15px;
                height:2px;
                background:white;
                border-width:8px 3px 5px 10px;
                border-style:solid;
                margin-left:10px;
                -webkit-border-radius:2px;
                -moz-border-radius:2px;
                border-radius:2px;
            }

            #down1 {
                width:47px;
                height:25px;
                margin:0 auto auto 10px;
                border-style:solid;
                border-width:0;
                background:black;
                -webkit-border-radius:0 20px 50px 70px;
                -moz-border-radius:0 20px 50px 70px;
                border-radius:0 20px 50px 70px;
            }

            .down_semicircle {
                margin:0 auto 10px auto;
                border-style:solid;
                border-color:black;
                border-width:0 10px 10px 10px;
            }

            #down2 {
                width:70px;
                height:35px;
                -webkit-border-radius:0 0 70px 70px;
                -moz-border-radius:0 0 70px 70px;
                border-radius:0 0 70px 70px;
            }

            #down3 {
                width:110px;
                height:55px;
                -webkit-border-radius:0 0 110px 110px;
                -moz-border-radius:0 0 110px 110px;
                border-radius:0 0 110px 110px;
            }

            #down4 {
                width:150px;
                height:75px;
                -moz-border-radius:0 0 150px 150px;
                -webkit-border-radius:0 0 150px 150px;
                border-radius:0 0 150px 150px;
            }

            #down5 {
                margin-left:-5px;
                width:190px;
                height:95px;
                border-width:0 10px 10px 0;
                -webkit-border-radius:0 0 190px 0;
                -moz-border-radius:0 0 190px 0;
                border-radius:0 0 190px 0;
            }

            #wenxiang {
                width:200px;
                height:195px;
                display:block;
                overflow:hidden;
                background:white;
            }
        </style>
    </head>
    <body>
        <div id = "wenxiang">
            <div id = "up5" class = "up_semicircle">
                <div id = "up4" class = "up_semicircle">
                    <div id = "up3" class = "up_semicircle">
                        <div id = "up2" class = "up_semicircle">
                            <div id = "up1">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id = "down5" class = "down_semicircle">
                <div id = "down4" class = "down_semicircle">
                    <div id = "down3" class = "down_semicircle">
                        <div id = "down2" class = "down_semicircle">
                            <div id = "down1">
                                <div id = "down0">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

 

Posted in CSS

2 thoughts on “DIV+CSS实现蚊香图形”

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>