纯CSS打造兼容各种浏览器的几何图形

于 2012-05-01 17:46:16 发布
阅读量244 收藏
点赞数
分类专栏： css html 文章标签： 浏览器 css div class 图形 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/f438952359/article/details/7526089
版权 
<!DOCTYPE HTML />
<html>
    <head>
        <title>生成各种形状</title>
        <style type="text/css">
            .shadow
            {
                padding:2px;
                margin:2px;
            }
            .shadow1 div
            {
                display:inline-block;
                border-color: #000 #000 #000 #000;
                border-style: solid;
            }
            .shadow2 div
            {
                display:inline-block;
                border-color: #FFF #000 #000 #000;
                border-style: solid;
            }
            .shadow3 div
            {
                display:inline-block;
                border-color: #FFF #FFF #000 #000;
                border-style: solid;
            }
            .shadow4 div
            {
                display:inline-block;
                border-color: #FFF #FFF #FFF #000;
                border-style: solid;
            }
            .shadow5 div
            {
                display:inline-block;
                border-color: #000 #000 #000 #FFF;
                border-style: solid;
            }
            .shadow6 div
            {
                display:inline-block;
                border-color: #000 #000 #FFF #FFF;
                border-style: solid;
            }
            .shadow7 div
            {
                display:inline-block;
                border-color: #000 #FFF #FFF #FFF;
                border-style: solid;
            }
            .shadow8 div
            {
                display:inline-block;
                border-color: #FFF #000 #FFF #FFF;
                border-style: solid;
            }
            .shadow9 div
            {
                display:inline-block;
                border-color: #FFF #FFF #000 #FFF;
                border-style: solid;
            }
            .shadow10 div
            {
                display:inline-block;
                border-color: #FFF #000 #000 #FFF;
                border-style: solid;
            }
            .shadow11 div
            {
                display:inline-block;
                border-color: #000 #FFF #FFF #000;
                border-style: solid;
            }
        </style>
    </head>
    <body>

        <div style="width:100%; background-color:#fff;">

            <div class="shadow shadow1">

                <div style="border-width:50px 50px 50px 50px;width:50px;height:50px;"></div>

                <div style="border-width:0 50px 50px 50px;width:50px;height:50px;"></div>
                <div style="border-width:50px 0 50px 50px;width:50px;height:50px;"></div>
                <div style="border-width:50px 50px 0 50px;width:50px;height:50px;"></div>
                <div style="border-width:50px 50px 50px 0;width:50px;height:50px;"></div>
                <div style="border-width:0 0 50px 50px;width:50px;height:50px;"></div>
                <div style="border-width:50px 50px 0 0;width:50px;height:50px;"></div>
                <div style="border-width:50px 0 0 50px;width:50px;height:50px;"></div>

            </div>
            <div class="shadow shadow2">
                <div style="border-width:50px 50px 50px 50px;width:0;height:0;"></div>

                <div style="border-width:50px 0 50px 50px;width:0;height:0;"></div>
                
                <div style="border-width:50px 50px 50px 0;width:0;height:0;"></div>
                <div style="border-width:50px 50px 0 0;width:0;height:0;"></div>
                <div style="border-width:50px 0 0 50px;width:0;height:0;"></div>

                <div style="border-width:50px 50px 50px 50px;width:50px;height:0;"></div>

                <div style="border-width:50px 0 50px 50px;width:50px;height:0;"></div>
                
                <div style="border-width:50px 50px 50px 0;width:50px;height:0;"></div> 

                <div style="border-width:50px 50px 50px 50px;width:0;height:50px;"></div>

                <div style="border-width:50px 0 50px 50px;width:0;height:50px;"></div>
                
                <div style="border-width:50px 50px 50px 0;width:0;height:50px;"></div>

                <div style="border-width:50px 50px 50px 50px;width:50px;height:50px;"></div>

                <div style="border-width:50px 0 50px 50px;width:50px;height:50px;"></div>
                
                <div style="border-width:50px 50px 50px 0;width:50px;height:50px;"></div>
                
            </div>
            <div class="shadow shadow3">
                <div style="border-width:50px 50px 50px 50px;width:0;height:0;"></div>

                <div style="border-width:0 50px 50px 50px;width:0;height:0;"></div>
                
                <div style="border-width:50px 50px 50px 50px;width:50px;height:0;"></div>

                <div style="border-width:0 50px 50px 50px;width:50px;height:0;"></div>
                <div style="border-width:50px 0 50px 50px;width:50px;height:0;"></div>
                
                <div style="border-width:50px 50px 50px 50px;width:0;height:50px;"></div>

                <div style="border-width:0 50px 50px 50px;width:0;height:50px;"></div>

                <div style="border-width:50px 50px 50px 50px;width:50px;height:50px;"></div>

                <div style="border-width:0 50px 50px 50px;width:50px;height:50px;"></div>
                <div style="border-width:50px 0 50px 50px;width:50px;height:50px;"></div>
                
            </div>
            <div class="shadow shadow4">

                <div style="border-width:50px 0 50px 50px;width:0;height:0;"></div>

                <div style="border-width:0 0 50px 50px;width:0;height:0;"></div>

                <div style="border-width:50px 0 50px 50px;width:0;height:50px;"></div>
                
                <div style="border-width:0 0 50px 50px;width:0;height:50px;"></div>


            </div>

            <div class="shadow shadow5">
                <div style="border-width:50px 50px 50px 50px;width:0;height:0;"></div>

                <div style="border-width:0 50px 50px 50px;width:0;height:0;"></div>
                
                <div style="border-width:50px 50px 0 50px;width:0;height:0;"></div>
                
                <div style="border-width:50px 0 0 50px;width:0;height:0;"></div>

                <div style="border-width:50px 50px 50px 50px;width:50px;height:0;"></div>

                <div style="border-width:0 50px 50px 50px;width:50px;height:0;"></div>
                
                <div style="border-width:50px 50px 0 50px;width:50px;height:0;"></div>
                
                <div style="border-width:50px 50px 50px 50px;width:0;height:50px;"></div>

                <div style="border-width:0 50px 50px 50px;width:0;height:50px;"></div>
                
                <div style="border-width:50px 50px 0 50px;width:0;height:50px;"></div>


                <div style="border-width:50px 50px 50px 50px;width:50px;height:50px;"></div>

                <div style="border-width:0 50px 50px 50px;width:50px;height:50px;"></div>
                
                <div style="border-width:50px 50px 0 50px;width:50px;height:50px;"></div>
                
                
            </div>
            <div class="shadow shadow6">
                <div style="border-width:50px 50px 50px 50px;width:0;height:0;"></div>

                <div style="border-width:50px 50px 50px 0;width:0;height:0;"></div>
                
                <div style="border-width:50px 50px 50px 50px;width:50px;height:0;"></div>

                <div style="border-width:50px 50px 50px 0;width:50px;height:0;"></div>

                <div style="border-width:50px 50px 50px 50px;width:0;height:50px;"></div>

                <div style="border-width:50px 50px 0 50px;width:0;height:50px;"></div>
                <div style="border-width:50px 50px 50px 0;width:0;height:50px;"></div>

                <div style="border-width:50px 50px 50px 50px;width:50px;height:50px;"></div>

                <div style="border-width:50px 50px 0 50px;width:50px;height:50px;"></div>
                <div style="border-width:50px 50px 50px 0;width:50px;height:50px;"></div>
                

            </div>
            <div class="shadow shadow7">
 
                <div style="border-width:50px 50px 0 50px;width:0;height:0;"></div>
                
                <div style="border-width:50px 50px 0 50px;width:50px;height:0;"></div>

            </div>
            <div class="shadow shadow8">
                

                <div style="border-width:50px 50px 50px 0;width:0;height:0;"></div>

                <div style="border-width:50px 50px 50px 0;width:0;height:50px;"></div>
                

            </div>
            <div class="shadow shadow9">

                <div style="border-width:0 50px 50px 50px;width:0;height:0;"></div>

                <div style="border-width:0 50px 50px 50px;width:50px;height:0;"></div>
                
                <div style="border-width:0 0 50px 50px;width:50px;height:0;"></div>

            </div>
            <div class="shadow shadow10">
                <div style="border-width:50px 50px 50px 50px;width:0;height:0;"></div>

                <div style="border-width:0 50px 50px 50px;width:0;height:0;"></div>

                <div style="border-width:50px 50px 50px 50px;width:50px;height:0;"></div>

                <div style="border-width:0 50px 50px 50px;width:50px;height:0;"></div>
                
                
                <div style="border-width:50px 50px 50px 0;width:50px;height:0;"></div>

                <div style="border-width:50px 50px 50px 50px;width:0;height:50px;"></div>

                <div style="border-width:0 50px 50px 50px;width:0;height:50px;"></div>
                
                <div style="border-width:50px 50px 50px 50px;width:50px;height:50px;"></div>

                <div style="border-width:0 50px 50px 50px;width:50px;height:50px;"></div>
                
                <div style="border-width:50px 50px 50px 0;width:50px;height:50px;"></div>  

            </div>
            <div class="shadow shadow11">
                <div style="border-width:50px 50px 50px 50px;width:0;height:0;"></div>
                
                <div style="border-width:50px 50px 0 50px;width:0;height:0;"></div>
                
                <div style="border-width:50px 50px 50px 50px;width:50px;height:0;"></div>

                
                <div style="border-width:50px 0 50px 50px;width:50px;height:0;"></div>
                <div style="border-width:50px 50px 0 50px;width:50px;height:0;"></div>

                <div style="border-width:50px 50px 50px 50px;width:0;height:50px;"></div>

                
                <div style="border-width:50px 0 50px 50px;width:0;height:50px;"></div>
                <div style="border-width:50px 50px 0 50px;width:0;height:50px;"></div>
                
                <div style="border-width:50px 50px 50px 50px;width:50px;height:50px;"></div>

                
                <div style="border-width:50px 0 50px 50px;width:50px;height:50px;"></div>
                <div style="border-width:50px 50px 0 50px;width:50px;height:50px;"></div>

            </div>
        </div>
    </body>
</html>


评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值