是否可以使用 CSS 实现文件夹形状 div 容器

Question

只是一个简单的问题。

我需要为容器元素实现这种形状（它将有一些子元素，如菜单和一些细节）

我唯一能想到的就是这样的多边形：

.folder {
  background: yellow;
  height: 150px;
  width: 250px;
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 11%, 46% 11%, 46% 0);
  filter: drop-shadow(0 0 0.75rem grey);
}

<div class="folder"></div>

问题是我不知道如何为该形状指定边界半径或如何添加某种阴影。

你知道我有什么方法可以实现这些形状吗？仅 CSS 有可能吗？

提前致谢。

Answer 1

你可以试试这个方法

.container {
  padding: 1em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
  grid-gap: 2em;
}

.name {
  width: 10em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1em;
}

.folder {
  height: 105px;
  width: 100%;
  position: relative;
  background-color: white;
  border: 1px solid gray;
  border-radius: 0 6px 6px 6px;
  box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.59);
  padding: 0.25em 0.5em;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

.folder:before {
  content: "";
  width: 50%;
  height: 12px;
  border-radius: 0 20px 0 0;
  background-color: white;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  position: absolute;
  top: -13px;
  left: -1px;
}
.options {
  display: flex;
  column-gap: 1em;
}
.folder::after{
  content: '';
  position: absolute;
  left:  0.8em;
  width: 4em;
  height: 5px;
  top: -0.8em;
  background: #7036E9;
  border-radius: 0 0 5px 5px;
}

<div class="container">

  <div class="folder">
    <h2 class="name">Folder Name 1</h2>
    <div class="options">
      <h5>Option 1</h5>
      <h5>Option 2</h5>
    </div>
  </div>
  <div class="folder">
    <h2 class="name">Folder Name 2</h2>
    <div class="options">
      <h5>Option 1</h5>
      <h5>Option 2</h5>
    </div>
  </div>

  <div class="folder">
    <h2 class="name">Folder Name Long Name This Is</h2>
    <div class="options">
      <h5>Option 1</h5>
      <h5>Option 2</h5>
    </div>
  </div>
</div>

Answer 2

这里有一个 snippet 非常接近您的需求。请注意，它使用 Opera atm 不支持的 clip-path: path('...')。如果需要支持 Opera，只需要使用外部图像就可以达到准确的效果。没有它，border-radius对于伪元素只能产生近看。不确定它是否足够接近。另请注意，路径本身由静态点坐标确定，这可能是不需要的。在这种情况下，它可能是由某些 JS 生成的。

<div class="folder"></div>

.folder{

  width: 420px;
  height: 310px;
  margin: 10em auto 10em;

  border-radius: 5px 25px 25px 25px;
  filter: drop-shadow(0 0 0.75rem grey);

  background: white;
  position: relative;
}

.folder::before{
    content:  '';
    position: absolute;
    top: -18px;
    width: 200px;
    height: 25px;
    background: white;
    border-radius: 25px 0 0 0;
    clip-path: path('M 0 0 L 160 0 C 185 2, 175 16, 200 18 L 0 50 z');
}
.folder::after{
  content: '';
  position: absolute;
  left:  40px;
  width: 85px;
  height: 5px;
  top: -18px;
  background: #7036E9;
  border-radius: 0 0 5px 5px;

}

是否可以使用 CSS 实现文件夹形状 div 容器

Is it possible to achieve a folder-shape div container using CSS

html

css

clip-path