html - 使用 CSS 制作带箭头的 div

Question

我正在尝试实现一个带箭头的 div。以下是与帖子/问题相关的代码部分。一段时间以来，我一直在试图弄清楚如何完成这项工作，但没有成功。

我有一个祖 parent div，一个带有 child 的 parent div，如下所示

<div className="main-segment-container">
   <div className="panel panel-default segment-select-box">
      <div className="panel-header segment-select-box-header">MAIN SEGMENT</div>
      <div className="panel-body segment-select-box-body">
        <div className=has-subsegments'>
          <input type="checkbox" className="form-check-input" value={checkedSegment.category_id} onChange={this.segmentChecked} />{' '}
             &nbsp;
          <label className="form-check-label">{checkedSegment.name}</label>
        </div>
      </div>
   </div>
</div>

这是我想要实现的目标(注意箭头):

我可以用这个 css 实现这个:

.main-segment-container{
   width: 100%
 }

.has-subsegments{
   background-color: #215C64;
   width: 100%;
   color: #fff;
   position: absolute;
   height: 30px;
}

.segment-select-box {
  border-radius: 3px;
  width: 100%;
  /* max-height: 400px; */
  /* overflow: scroll; */
  position: relative;
}
.segment-select-box-body{
  width: 100%;
  max-height: 400px;
  overflow: scroll;
  padding: 0px;
  display: inline-block;
}

.has-subsegments::after{
  content: "";
  margin-top: -15px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  position: absolute;
  border-left: 21px solid #215C64;
  width: 0;
  height: 0px;
  right: -20px;
  top: 50%;
}

问题:

当我使用上面的 css 时，.has-subsegments 元素在我滚动时似乎处于固定位置。像这样:

问题

如何在不从正常位置移除元素的情况下实现滚动？

注意:

1. 当我从 .segment-select-box-body 类中删除 scroll 时，一切正常，但子列表变得很长，因此需要滚动。
2. 将 position: relative; 添加到 .segment-select-box-body 类使 :after 伪元素不可见。

编辑

在这里查看 JSFIDDLE:https://jsfiddle.net/uuwhndgu/16/

Answer 1

编辑

感谢发布 jsfiddle。我认为，您尝试实现的目标不可能以您尝试的方式实现。

我用建议的解决方法/修复更新了 fiddle :https://jsfiddle.net/uuwhndgu/34/

我所做的是给包装列增加一点宽度(您可能必须将列增加到 .col-md-3 或减少 .segment 的宽度-select-box 一点。无论如何你可能需要做后者)，max-height 为 200px 和 overflow-y: scroll;。我将 .segment-select-box 的宽度设置为 90%，并将 position: absolute;of .has-subsegments 更改为 position:relative；。我不知道这是否对您有帮助，但我相信，实现您想要实现的目标的方法并不多。

---

原始答案

我不太确定你打算让这个东西如何表现。但是，如果突出显示的条目(带箭头的条目)应该留在原处，我认为您可以简单地将 position: absolute; 替换为 position: relative;你的 .has-subsegments 类。现在，我无法近乎完美地重新创建它，因为它是一个 React 应用程序，但您仍然应该明白这个想法:

在 .has-subsegments 上使用 position: absolute;

在 .has-subsegments 上使用 position: relative;