如何使用“共享边框”创建多个div？

Question

我正在试图找出如何精美地将div组合在一起以创建更具创意的形状轮廓。基本上我想制作一个带共享边框的文本框。我在THERE

上写了一个丑陋的样本

.white-box{
width: 300px;
}
.white-box-tab{
position: relative;
left: 8px;
width: 45%;
height: 25px;
background: #fff;
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1), -1px 0px 1px rgba(0, 0, 0, 0.1);
border-radius: 3px 3px 0px 0px;

text-align: center;
}
.white-box-tab:after{
  content:''; 
  width:100%; 
  height:1px; 
  position:absolute;
  background:white; 
  bottom: -0.5px;
  left: 0px;
}

.white-box-body{
width: 100%;
height: 200px;
background: #fff;
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1), -1px -1px 1px 0px rgba(0, 0, 0, 0.1);
border-radius: 0px 3px 3px 3px;
}

<div class="white-box">
<div class="white-box-tab">
The title
</div>
<div></div>
<div class="white-box-body">
</div>
</div>

然而，我实现它的方式感觉非常丑陋和不可扩展。是否有更好的方法来完成这样的任务？

Answer 1

我只是不将底部边框应用于元素并将其向下移动其他div边框宽度：

public ItemCustomer Item;

.white-box {
  width: 300px;
}

.white-box .box {
  border: 1px solid #ddd;
  background-color: white;
}

.white-box .box.white-box-tab {
  border-bottom: none;
  position: relative;
  top: 1px;
  margin-left: 5%;
  width: 70%;
  z-index: 10;
}

.white-box-body {
  height: 300px;
}