CSS可以通過(guò)偽元素和布局方式實(shí)現(xiàn)類(lèi)似于文件夾的效果，下面我們一步步來(lái)看看怎么做。

.folder{
position: relative;
display: inline-block;
width: 80px;
height: 60px;
background-color: #3299CC;
color: #FFF;
padding: 10px;
margin: 20px;
box-sizing: border-box;
}
.folder:before{
content: '';
position: absolute;
top: -10px;
left: -20px;
width: 0;
height: 0;
border-width: 0 20px 20px 0;
border-style: solid;
border-color: transparent #3299CC transparent transparent;
}
.folder:after{
content: '';
position: absolute;
top: -10px;
right: -20px;
width: 0;
height: 0;
border-width: 0 20px 20px 0;
border-style: solid;
border-color: transparent transparent transparent #3299CC;
}
.folder .content{
height: 40px;
overflow: hidden;
}

首先，在HTML中創(chuàng)建一個(gè)class為folder的元素，該元素作為文件夾的容器，設(shè)置其尺寸、背景顏色和內(nèi)邊距。接著，我們?yōu)樵撛靥砑觽卧?before和:after，分別作為左上角和右上角的三角形。其中，通過(guò)border方式設(shè)置三角形的大小、顏色和位置。此外，注意設(shè)置三角形的position屬性為absolute，使其在文件夾容器內(nèi)不會(huì)影響其他元素。

最后，我們可以為folder元素內(nèi)添加一個(gè)類(lèi)為content的元素，作為文件夾的內(nèi)容，通過(guò)設(shè)置其高度和overflow:hidden，實(shí)現(xiàn)內(nèi)容超出時(shí)自動(dòng)隱藏。至此，我們通過(guò)CSS實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的文件夾效果。