CSS语音弹出和内部列表分隔符

Question

我试图用内部菜单创建那种语音弹出窗口。

菜单的每个项目都以边框分隔。当菜单中有奇数个项目时，情况还可以，但是当有偶数个项目时，如何扩展语音指针内的边框？

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

The codepen

或

代码段

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

首先，由于您使用的是.pointer和.pointerBorder元素，因此您不需要:before和:after pseudo-elements .bubble制作箭头。

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

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

您还应该摆脱.bubble上的设定高度，因为它的高度由其内容定义。

更改后，您的盒子上会有一个完全垂直对齐的箭头。

现在，事实是你不能扩展边界，但你可以给出边界延伸到箭头的错觉。您可以在pseudo-element

上添加.pointer来完成此操作

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

如果你的物品数量是固定的，那么你就可以了，但如果物品有所不同，你必须在.bubble上添加一个课程，这样你才能知道是否有一个或奇数个项目。这应该在您的服务器端脚本或JavaScript上完成。 （您可以跳过此部分仅采用CSS方法，但您必须更改HTML）

所以完整的代码如下所示：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;