码迷,mamicode.com
首页 > 其他好文 > 详细

菜单图标的实现

时间:2016-12-02 07:40:25      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:tle   http   代码   分享   round   padding   color   ges   span   

以前想实现一个菜单的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>

 

菜单图标的实现

标签:tle   http   代码   分享   round   padding   color   ges   span   

原文地址:http://www.cnblogs.com/11lang/p/6124300.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!