html - CSS 语音弹出窗口和内部列表分隔符

Question

我正在尝试使用内部菜单创建那种语音弹出窗口。

菜单的每个元素都由边框分隔。当菜单中的元素数量为奇数时，一切正常，但是当元素数量为偶数时，如何在语音指针内扩展边框？

经过一番思考，我还必须考虑在固定弹出窗口大小内滚动菜单项的可能性。如果元素边框也跟随语音指针内的滚动，那将是完美的。 (当然，在这种情况下，弹出窗口将在父按钮的右侧而不是左侧打开)

The codepen

或

代码片段

.bubble {
  position: relative;
  width: 100px;
  height: 240px;
  padding: 0px;
  background: #FFFFFF;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  border: #7F7F7F solid 1px;
}
.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 0 15px 15px;
  border-color: transparent #FFFFFF;
  display: block;
  width: 0;
  z-index: 1;
  right: -15px;
  top: 105px;
}
.bubble:before {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 0 15px 15px;
  border-color: transparent #7F7F7F;
  display: block;
  width: 0;
  z-index: 0;
  right: -16px;
  top: 105px;
}

.list {
  margin:0px;
  width: 100%;
  height: 100%;
  list-style: none;
  padding: 0;
}

.item {
  margin:0px;
  text-align: center;
  border-bottom: 1px solid black;
  width: 100%;
  height:59px;
  
}

.item:last-child {
  border-bottom:none;
}

<div class="bubble" style="border-color: rgb(127, 127, 127); width: 100px; height: 240px; top: 55px; border-radius: 0px; border-width: 1px; background-color: rgb(255, 255, 255);">
  <div class="pointer" style="content: '';position: absolute;border-style: solid;border-width: 15px 0 15px 15px;border-color: transparent #FFFFFF;display: block;width: 0;z-index: 1;right: -15px;top: 105px;">
  </div>
  <div class="pointerBorder" style="content: '';position: absolute;border-style: solid;border-width: 15px 0 15px 15px;border-color: transparent #7F7F7F;display: block;width: 0;z-index: 0;right: -16px;top: 105px;">
  </div>
  <ul class="list">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
  </ul>
</div>

Answer 1

首先，因为您使用的是 .pointer 和 .pointerBorder 元素，所以您不需要 :before 和 :after .bubble 上的 伪元素 来制作箭头。

其次，由于您的箭头将始终垂直居中于 .bubble，因此您应该将其垂直对齐以更加灵活:

.pointerBorder,.pointer {
  margin: auto;
  top: 0;
  bottom: 0;
  height: 1px;
}

您还应该去掉 .bubble 上的设置高度，因为它的高度由它的内容定义。

更改后，您的框上将有一个完全垂直对齐的箭头。

现在，事实是您无法扩展边框，但您可以给人一种边框延伸到箭头中的错觉。您可以通过在 .pointer

上添加一个 pseudo-element 来做到这一点

.pointer:after {
  content: '';
  position: absolute;
  width: 17px;
  height: 1px;
  background: #000;
  top: 0px;
  left: -17px;
  bottom: 0;
  margin: auto;
}

如果你的元素数量是固定的并且是偶数那么你没问题，但如果元素变化，你必须添加一个类到 .bubble 这样你就可以知道是否有偶数或其中的奇数项。这应该在您的服务器端脚本或通过 JavaScript 完成。 (对于仅使用 CSS 的方法，您可以跳过此部分，但您必须更改 HTML)

所以完整的代码是这样的:

.bubble {
  position: relative;
  width: 100px;
  padding: 0px;
  background: #FFFFFF;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  border: #7F7F7F solid 1px;
}
.list {
  margin: 0px;
  width: 100%;
  height: 100%;
  list-style: none;
  padding: 0;
}
.item {
  margin: 0px;
  text-align: center;
  border-bottom: 1px solid black;
  width: 100%;
  height: 59px;
}
.item:last-child {
  border-bottom: none;
}
.odd_items .pointer:after {
  content: '';
  position: absolute;
  width: 17px;
  height: 1px;
  background: #000;
  top: 0px;
  left: -17px;
  bottom: 0;
  margin: auto;
}
.pointerBorder,
.pointer {
  margin: auto;
  top: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  border-style: solid;
  border-width: 15px 0 15px 15px;
  position: absolute;
}
.pointer {
  border-color: transparent #FFFFFF;
  right: -15px;
  z-index: 1;
}
.pointerBorder {
  border-color: transparent #7F7F7F;
  right: -16px;
}

<div class="bubble odd_items">
  <div class="pointer">
  </div>
  <div class="pointerBorder">
  </div>
  <ul class="list">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
  </ul>
</div>