如何使用CSS实现这种类型的边界

Question

在示例图像中，您可以看到＆＃34;日期＆＃34;之前和之后的浓重暗线。和＆＃34;姓名＆＃34;。我试图用CSS实现这一点。搜索但无法想到在搜索时将其称为什么。

＆＃13;

＆＃13;

.sort-btn-holder{
  display: inline-block;
}
.sort-title{
  display: block;
  text-align: center;
}

＆＃13;

<div class="sort-btns pull-right">

  <div class="sort-btn-holder">
   <span class="sort-title">Date</span>

  <button id="desc" class="btn btn-primary" type="button">
    <img src="http://williamcunningham.me/abc/img/sortza.jpg" width="24px" height="24px">
  </button>

  <button id="asc" class="btn btn-primary" type="button">
    <img src="http://williamcunningham.me/abc/img/sortaz.jpg" width="24px" height="24px">
  </button>
  </div>

  <div class="sort-btn-holder">
   <span class="sort-title">Name</span>

    <button id="older" class="btn btn-primary" type="button">
      <img src="http://williamcunningham.me/abc/img/sort90.jpg" width="24px" height="24px">
    </button>

    <button id="newer" class="btn btn-primary" type="button">
      <img src="http://williamcunningham.me/abc/img/sort09.jpg" width="24px" height="24px">
    </button>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

我以为我应该使用：之前或之后。 以下是小提琴中HTML和CSS的链接：https://jsfiddle.net/dntbqykk/

Answer 1

以下是使用绝对定位和:after伪元素来保存标签的一种方法（＆＃34;日期＆＃34;例如）。

该代码段演示了一个概念验证，但仍有一些细节可以解决您想要融入网站的确切样式。

＆＃13;

＆＃13;

.sort-btn-holder {
  border: 1px dotted blue;
  display: inline-block;
  position: relative;
  padding-top: 25px;
}
.btn.btn-primary {
  border: 1px dotted red;
  width: 50px;
  height: 50px;
}
.sort-title {
  position: absolute;
  z-index: -1;
  top: 10px;
  left: 25px;
  right: 25px;
  height: 15px;
  border: 4px solid blue;
  border-width: 4px 4px 0 4px;
}
.sort-title:after {
  content: 'Date';
  margin: 0 5px;
  position: absolute;
  left: 0;
  right: 0;
  top: -13px;
  background-color: white;
  text-align: center;
}

＆＃13;

<div class="sort-btn-holder">
  <span class="sort-title"></span>

  <button id="desc" class="btn btn-primary" type="button">
    <img src="http://placehold.it/24x24" width="24px" height="24px">
  </button>
  <button id="asc" class="btn btn-primary" type="button">
    <img src="http://placehold.it/24x24" width="24px" height="24px">
  </button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

不是CSS解决方案，但您尝试使用fieldset标记吗？ 我知道这不是完美的解决方案，但它会给你类似的效果，你可以调整边框样式。之后，您可以对齐那些内部框。这可能是最简单的方法，即使我相信CSS能够实现这一目标，但使用更多代码。

Answer 3

以下是包含:before和:after伪元素以及box-shadow

的选项

.sort-btn-holder{
  display: inline-block;
}

.sort-title{
  display: block;
  text-align: center;
  position: relative;
}

.sort-title:after {
  content: '';
  position: absolute;
  right: 15%;
  width: 30px;
  top: 60%;
  height: 13px;
  box-shadow: 5px -5px 0px 0px #000000;
}

.sort-title:before {
  content: '';
  position: absolute;
  left: 15%;
  width: 30px;
  top: 60%;
  height: 13px;
  box-shadow: -5px -5px 0px 0px #000000;
}

button {
  height: 40px;
  width: 65px;
  border: none;
  background: #29477F;
}

<div class="sort-btns pull-right">

  <div class="sort-btn-holder">
   <span class="sort-title">Date</span>

  <button id="desc" class="btn btn-primary" type="button">
    <img src="http://williamcunningham.me/abc/img/sortza.jpg" width="24px" height="24px">
  </button>

  <button id="asc" class="btn btn-primary" type="button">
    <img src="http://williamcunningham.me/abc/img/sortaz.jpg" width="24px" height="24px">
  </button>
  </div>

  <div class="sort-btn-holder">
   <span class="sort-title">Name</span>

    <button id="older" class="btn btn-primary" type="button">
      <img src="http://williamcunningham.me/abc/img/sort90.jpg" width="24px" height="24px">
    </button>

    <button id="newer" class="btn btn-primary" type="button">
      <img src="http://williamcunningham.me/abc/img/sort09.jpg" width="24px" height="24px">
    </button>
  </div>

</div>