Html 如何使用CSS创建文件夹选项卡的形状

发布于11月27日

我想用这个形状创建一个div，使用的是html和css:

我创建了类似下面的东西，但它的边框看起来不像上面的照片.有人能帮我吗？

.card {
  background-color: rgb(237, 241, 244);
  position: relative;
  border-radius: 12px;
  width: 300px;
  height: 450px;
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: 38px;
  border-radius: 8px;
  height: 20px;
  width: 100px;
  background-color: white;
}

<div class="card">
  <div class="header"></div>
</div>

推荐答案

您可以使用选项卡标题的左侧和右侧的额外圆角div以及 Select 性地圆角来获得所需的效果.

在这里，我使选项卡覆盖在标题边框的顶部.

.card {
  --bg-color: rgb(237, 241, 244);
  --card-corner: 20px;
  --tab-corner: 12px;
  --border-width: 2px;
  width: 300px;
  height: 450px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.card * { box-sizing: inherit; }
.header {
  flex: none;
  height: 20px;
  font: 12px sans-serif;
  background-color: var(--bg-color);
  border: var(--border-width) solid #0144;
  border-bottom: none;
  border-radius: var(--card-corner) var(--card-corner) 0 0;
  position: relative;
}
.content {
  flex: auto;
  background-color: var(--bg-color);
  border: var(--border-width) solid #0144;
  border-top: none;
  border-radius: 0 0 var(--card-corner) var(--card-corner);
  padding: 10px;
}

.tab {
  z-index: 1;
  position: absolute;
  right: max(24px, var(--card-corner));
  top: calc(-1 * var(--border-width));
  height: 20px;
  display: flex;
  isolation: isolate;
}
/* border style */
.inner::before, .outer::before, .label {
  border-width: var(--border-width);
  border-color: #0144;
}
/* tab curve elements */
.inner, .outer {
  width: var(--tab-corner);
  position: relative;
}
.inner::before, .outer::before {
  content: '';
  position: absolute;
  inset: 0;
}
/* fills */
.outer, .inner::before { background-color: white; }
.inner, .outer::before { background-color: var(--bg-color); }
/* align borders of neighboring elements */
.outer {
  z-index: 1;
  align-self: start;
  height: 50%;
}
.left.outer { margin-right: calc(-1 * var(--border-width)); }
.right.outer { margin-left: calc(-1 * var(--border-width)); }
/* borders */
.left.outer::before {
  border-style: solid solid none none;
  border-top-right-radius: var(--tab-corner);
}
.left.inner::before {
  border-style: none none solid solid;
  border-bottom-left-radius: var(--tab-corner);
}
.right.inner::before {
  border-style: none solid solid none;
  border-bottom-right-radius: var(--tab-corner);
}
.right.outer::before {
  border-style: solid none none solid;
  border-top-left-radius: var(--tab-corner);
}
.label {
  border-bottom-style: solid;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="card">
  <div class="header">
    <div class="tab">
      <div class="left outer"></div>
      <div class="left inner"></div>
      <div class="label">Header</div>
      <div class="right inner"></div>
      <div class="right outer"></div>
    </div>
  </div>
  <div class="content">
  </div>
</div>