如何创建带有“共享边界”的serveral？

Question

我试图找出如何将div漂亮地组合在一起，以创建更有创意的形状轮廓。基本上，我想制作一个带有共享边框的文本框。我在那里上制作了一个丑陋的样本

​

.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边框宽度将其向下移动：

​

.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;
}

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

​