我正在尝试用CSS绘制一个简单的文件夹图标,这就是我的位置:
/* CSS */
.container {
border: solid 1px #000;
width: 100px;
height: 100px;
padding: 5px;
text-align: center;
}
.folder_tab, .folder {
margin: 0 auto;
background-color: #708090;
}
.folder_tab {
width: 25px;
height: 5px;
margin-right: 50%;
border-radius: 5px 15px 0 0;
}
.folder {
width: 50px;
height: 35px;
border-radius: 0 5px 5px 5px;
box-shadow: 1px 1px 0 1px #CCCCCC;
}
<!-- HTML -->
<div class="container">
<div class="folder_tab"></div>
<div class="folder"></div>
text
</div>
结果:
有没有更简单或更优雅的方法来做到这一点?
最佳答案
如果您想使用CSS3,这是我的解决方案。
HTML
<div class="folder"></div>
CSS
.folder {
width: 150px;
height: 105px;
margin: 0 auto;
margin-top: 50px;
position: relative;
background-color: #708090;
border-radius: 0 6px 6px 6px;
box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.59);
}
.folder:before {
content: '';
width: 50%;
height: 12px;
border-radius: 0 20px 0 0;
background-color: #708090;
position: absolute;
top: -12px;
left: 0px;
}
DEMO (在Chrome中测试)
关于css - 使用CSS绘制文件夹图标,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15857006/