[css] 使用css画文件夹icon和话筒icon
在一些界面上 , 如果每个icon都去找图片还是相当麻烦的 , 直接使用css画出icon就方便的多了 , 下面两个是画的文件夹和话筒的icon
效果:
文件夹:
.folderBtn {
display: inline-block;
background-color: transparent;
overflow: hidden;
font-size: 1px;
}
.folderBtn:before {
content: '';
float: left;
background-color: #9da0a0;
width: 15px;
height: 3px;
margin-left: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
box-shadow: 2px 2px 0 0 #9da0a0;
}
.folderBtn:after {
content: '';
float: left;
clear: left;
background-color: #d4d6d6;
width: 33px;
height: 22px;
border-radius: 1px;
}话筒:
.audioIcon {
color: #9da0a0;
position: relative;
width: 12px;
height: 14px;
border-left: solid 1px currentColor;
border-right: solid 1px currentColor;
border-bottom: solid 1px currentColor;
border-radius: 0 0 50% 50%;
display: inline-block;
}
.audioIcon:before {
content: '';
position: absolute;
left: 1px;
top: -6px;
width: 8px;
height: 17px;
border: solid 1px currentColor;
border-radius: 4px;
background-color: currentColor;
}
.audioIcon:after {
content: '';
position: absolute;
left: 4px;
bottom: -4px;
width: 1px;
height: 4px;
background-color: currentColor;
}本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-01-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读