重叠的文件夹标签外观

Question

我正在尝试重新创建下面的标签外观。我试图在this snippet之后使用:before和:after伪元素，但是将它们重叠是没有意义的。我也正在使用React.js，但我希望我可以仅使用CSS / HTML来完成此任务。实现这一目标的最简单方法是什么？

当前代码：

.tab-list {
  border-bottom: 1.5px solid #4EBDE5;
  padding-left: 0;
}

.tab-list-item {
  display: inline-block;
  list-style: none;
  margin-bottom: -1px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.tab-list-item:hover {
  background-color: #4EBDE5;
  color: white;
  border-radius: 5px 5px 0 0;
}

.tab-list-active {
  border-width: 1px 1px 0 1px;
  background-color: #4EBDE5;
  color: white;
  border-radius: 5px 5px 0 0;
}

<ol class="tab-list">
  <li class="tab-list-item tab-list-active">Name</div>
  <li class="tab-list-item">Name</div>
  <li class="tab-list-item">Name</div>
</ol>

所需的外观：