CSS伪类实现的箭头(不兼容IE6)

面试前端开发需要作品么 软件开发好还是前端开发 web前端开发人员的面试要点

代码片段 1

<!doctype html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发 各种浏览器兼容软件下载</title>
    <style>
        body {
            background: #f1f1f1;
        }
        .dm {
            margin-top: 10px;
            width: 100px;
            height: 100px;
            float: left;
            margin-right: 20px;
            background-color: #fff;
            position: relative;
            border: 1px solid #aaa;
            border-radius: 4px;
        }
        #demo:after,
        #demo:before {
            border: solid transparent;
            content: ‘ ‘;
            height: 0;
            left: 100%;
            position: absolute;
            width: 0;
        }
        #demo:after {
            border-width: 10px;
            border-left-color: #FFF;
            top: 15px;
        }
        #demo:before {
            border-width: 11px;
            border-left-color: #888;
            top: 14px;
        }
        /* */
        #demo2:after,
        #demo2:before {
            border: solid transparent;
            content: ‘ ‘;
            position: absolute;
            width: 0px;
        }
        #demo2:after {
            border-width: 10px;
            border-bottom-color: #FFF;
            top: -20px;
            left: 10px;
        }
        #demo2:before {
            border-width: 11px;
            border-bottom-color: #888;
            top: -22px;
            left: 9px;
        }
        /* */
        #demo3:after,
        #demo3:before {
            border: solid transparent;
            content: ‘ ‘;
            position: absolute;
            width: 0px;
        }
        #demo3:after {
            border-width: 10px;
            border-right-color: #FFF;
            top: 15px;
            left: -20px;
        }
        #demo3:before {
            border-width: 11px;
            border-right-color: #888;
            top: 14px;
            left: -22px;
        }
        /* */
        #demo4:after,
        #demo4:before {
            border: solid transparent;
            content: ‘ ‘;
            position: absolute;
            width: 0px;
        }
        #demo4:after {
            border-width: 10px;
            border-top-color: #FFF;
            top: 100%;
            left: 10px;
        }
        #demo4:before {
            border-width: 11px;
            border-top-color: #888;
            top: 100%;
            left: 9px;
        }
        /* */
    </style>
</head>
<body>
    <div id=”demo” class=”dm”></div>
    <div id=”demo2″ class=”dm”></div>
    <div id=”demo3″ class=”dm”></div>
    <div id=”demo4″ class=”dm”></div>
</body>
</html>

css伪类实现的箭头(不兼容IE6)

前端开发工具哪个好用 html5前端开发面试 软件前端开发怎么样

» 本文来自:前端开发者 » 《CSS伪类实现的箭头(不兼容IE6)》
» 本文链接地址:https://www.rokub.com/5317.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!