首页 > 代码库 > 菜单图标的实现

菜单图标的实现

2024-08-24 15:59:20   222人阅读

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

 

菜单图标的实现


联系
我们