菜单图标的实现

以前想实现一个菜单的icon，都是用伪元素来实现的，代码量有点多。

 

无意中发现了这样一种方法，通过background-clip:content-box来裁剪背景。上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .icon{
                width: 50px;
                height: 10px;
                padding: 10px 0;
                background-color: #000;
                border-top:10px solid #000;
                border-bottom:10px solid #000;
                background-clip:content-box;/*裁剪内容区域*/
            }
        </style>
    </head>
    <body>
        <div class="icon"></div>
    </body>
</html>

 

posted @ 2016-12-02 01:54  _Jo  阅读(141)  评论(0)  编辑  收藏  举报