在实施边框设计方面需要帮助答案

【问题标题】：Require help on implementing border design在实施边框设计方面需要帮助
【发布时间】：2017-11-28 17:05:45
【问题描述】：

必须实现一个我对如何实现边框设计感到困惑的设计。附件是我正在尝试实现的图片。

我正在尝试根据选择我想要选择的过滤器类型来确定如何实现该边框 ui。这同样适用于其他两个选项卡。除非用户明确选择它，否则该选项也是不可见的。我在 codepen.io 上进行了搜索，但没有得到所需的结果。我知道存在这种类型的 css，但是我无法获取特定的单词/术语来搜索它。

这是我到目前为止所做的工作

HTML

<div class="search_options_container">
  <div class="search_option_tab">
    <div class="option_header" data-filter-type="team">
      TEAM
      <br>
      <span>ALL</span>
    </div>
    <div class="option_header" data-filter-type="position">
      POSITION
      <br>
      <span>ALL</span>
    </div>
    <div class="option_header" data-filter-type="price">
      PRICE
      <br>
      <span>ALL</span>
    </div>
  </div>
  <div class="options_container">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
  <div class="options_container" ng-if="filter-position">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
  <div class="options_container" ng-if="filter-price">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
</div>

CSS

.search_options_container {
  text-align: center;
}
.search_option_tab {
  display: flex;
  padding-top: 6px;
}
.option_header {
  display: inline-block;
  width: 33.33%;
}
.options_container {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  background: white;
  z-index: 1;
  padding-top: 6px;
  height: 180px;
  overflow: auto;
}
.options_container > .filter-option {
  display: inline-block;
  padding: 5px;
  border-bottom: 1px solid black;
  width: 80%;
}
.options_container > .filter-option:last-child {
  border-bottom: none;
}

P.S:- 我已经按照我认为合适的方式将图片复制到所需的细节。如果您想拥有整张照片，请告诉我。

另外，我知道你们中的一些人可能会说显示边框实现的代码在哪里。我对此的回应是因为我无法合并两个 div 之间的边界的一小部分，也就是价格标签和它的选项之间的边界，我根本没有实现。

【问题讨论】：

标签： html angularjs css flexbox

【解决方案1】：

这是一个解决方案，您将选项卡向下移动 1 个像素，当它们获得背景时，它们将覆盖下面的边框。请参阅 CSS 中的注释。

.search_options_container {
  text-align: center;
}
.search_option_tab {
  display: flex;
  padding-top: 6px;
  position: relative;                      /*  added so z-index work       */
  z-index: 2;                              /*  put tab's in a higher layer */
}
.option_header {
  display: inline-block;
  width: 33.33%;
  transform: translateY(1px);              /*  push the tabs 1px down so they
                                               cover the below border */
}
.option_header[data-filter-type="team"] {  /*  added new rule  */
  border: 1px solid red;
  border-bottom: none;
  background: lightgray;
}
.options_container {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  background: white;
  z-index: 1;
  padding-top: 6px;
  height: 180px;
  overflow: auto;
  border: 1px solid red;                    /*  added  */
  background: lightgray;                    /*  added  */
}

.options_container > .filter-option {
  display: inline-block;
  padding: 5px;
  border-bottom: 1px solid black;
  width: 80%;
}
.options_container > .filter-option:last-child {
  border-bottom: none;
}

<div class="search_options_container">
  <div class="search_option_tab">
    <div class="option_header" data-filter-type="team">
      TEAM
      <br>
      <span>ALL</span>
    </div>
    <div class="option_header" data-filter-type="position">
      POSITION
      <br>
      <span>ALL</span>
    </div>
    <div class="option_header" data-filter-type="price">
      PRICE
      <br>
      <span>ALL</span>
    </div>
  </div>
  <div class="options_container">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
  <div class="options_container" ng-if="filter-position">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
  <div class="options_container" ng-if="filter-price">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
</div>

更新

如果您只想在“ALL”文本周围环绕边框，只需将其元素更改为 div，删除 <br> 并更改此 CSS 规则

.option_header[data-filter-type="team"]

到

.option_header[data-filter-type="team"] div

堆栈sn-p

.search_options_container {
  text-align: center;
}
.search_option_tab {
  display: flex;
  padding-top: 6px;
  position: relative;                          /*  added so z-index work       */
  z-index: 2;                                  /*  put tab's in a higher layer */
}
.option_header {
  display: inline-block;
  width: 33.33%;
  transform: translateY(1px);                  /*  push the tabs 1px down so they
                                               cover the below border */
}
.option_header[data-filter-type="team"] div {  /*  added new rule  */
  border: 1px solid red;
  border-bottom: none;
  background: lightgray;
}
.options_container {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  background: white;
  z-index: 1;
  padding-top: 6px;
  height: 180px;
  overflow: auto;
  border: 1px solid red;                       /*  added  */
  background: lightgray;                       /*  added  */
}

.options_container > .filter-option {
  display: inline-block;
  padding: 5px;
  border-bottom: 1px solid black;
  width: 80%;
}
.options_container > .filter-option:last-child {
  border-bottom: none;
}

<div class="search_options_container">
  <div class="search_option_tab">
    <div class="option_header" data-filter-type="team">
      TEAM
      <div>ALL</div>
    </div>
    <div class="option_header" data-filter-type="position">
      POSITION
      <div>ALL</div>
    </div>
    <div class="option_header" data-filter-type="price">
      PRICE
      <div>ALL</div>
    </div>
  </div>
  <div class="options_container">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
  <div class="options_container" ng-if="filter-position">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
  <div class="options_container" ng-if="filter-price">
    <span class="filter-option" data-option="All">All</span>
    <span class="filter-option" data-option="Option 1">Option 1</span>
    <span class="filter-option" data-option="Option 2">Option 2</span>
    <span class="filter-option" data-option="Option 3">Option 3</span>
    <span class="filter-option" data-option="Option 4">Option 4</span>
    <span class="filter-option" data-option="Option 5">Option 5</span>
  </div>
</div>

【讨论】：

是的！！！但是你能解释一下你是怎么做到的吗？很想了解它。同样的技巧也适用于其他标签吗？
@Sagar 在 CSS 中添加了一些注释……这些有意义吗？
非常感谢先生。很有道理。
@Sagar 添加了第二个示例
再次感谢。只是一个小小的问题。两个div合并的地方是否可能有弯曲的边缘？

【解决方案2】：

这是我的方法，...我添加了一些新的 CSS 规则，还覆盖了你的一些 CSS 代码。这将在每个选项卡上方创建一个飞行框。有了这个，我认为您可以显示类似于“ALL”一词后面的白色区域的图片。

注意：您当前和活动的 option_header 必须接收活动类。

.search_options_container {
    text-align: center;
}
.search_option_tab {
    display: flex;
    padding-top: 6px;
}
.option_header {
    display: inline-block;
    width: 33.33%;
    position: relative; /* added : makes childs to be relative */
}

/* === Add === */
.option_header span{
    position:relative; /* makes sure z-index works for them */
    z-index:3;         /* brings span (element with word "ALL") in tabs to front  */
} 
.option_header.active:after{
    content: ' ';      /* must defined in order to render after element */ 
    position: absolute;
    background-color: #fff;
    border: 2px solid purple;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    height: 25px;      /* a number that is related to height of tabs */

    /* optional : add space to left and right */
    right: 30px;       
    left: 30px; 

    /* optional: if you don't want that you can add width 
    left:0;
    width:100%; */

    bottom: -2px;      /* shifts the element 2 pixels down ( 2px = width of the border) */
    z-index: 2;        /* brings 1 layer in front */
}
/* === End of Add === */

.options_container {
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    background: white;
    z-index: 1;
    padding-top: 6px;
    height: 180px;
    overflow: auto;

    /* === Add === */
    border:2px solid purple;
    border-radius:10px; 
    right:10px;         /* optional, adds small distance from right */
    left:10px;          /* not required, adds small distance from left */
    width:auto;         /* if you don't use left and right, remove this. */
}
.options_container > .filter-option {
    display: inline-block;
    padding: 5px;
    border-bottom: 1px solid black;
    width: 80%;
}
.options_container > .filter-option:last-child {
    border-bottom: none;
}

希望对你有帮助

【讨论】：

您的代码会根据需要提供效果。然而，标题的边界正在转移到另一边。另外，如果可能的话，我想避免设置 w.r.t 像素的位置，因为它们可能无法响应屏幕尺寸。
是的 ;) 但我只是想为您提供一个解决方案，这些像素都是示例，并且很容易让它们在真实情况下做出响应.. 毕竟我希望你实现你想要的要做.. :)
是的。如果您还可以解释您所做的更改以及为什么喜欢 LGSon 以便人们能够理解并制作所需的模组，那就太好了:)。