Looking to create a speech popup with an internal menu that has items separated by borders. The challenge arises when there is an even number of items - how can the border extend inside the speech pointer?
After some consideration, also need to account for the possibility of scrolling the menu items within a fixed popup size. Ideally, the item border should follow the scrolling within the speech pointer as well (popup opening on the right instead of left in this case).
https://i.sstatic.net/BeMcP.png
Check out the codepen
or
The code snippet:
.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>