html - 如何在边框上添加一个元素并让它在调整窗口大小时保持位置？

Question

我是网络开发的新手，我在 CSS 定位方面遇到了困难。

我正在尝试制作一个看起来像轴的 div 分隔符:https://ibb.co/pfv8wcm

调整窗口大小后，我在边框上添加的三 Angular 形失去了它们的位置:https://ibb.co/fS8707P

代码演示:https://liveweave.com/V4lTxA

我怎样才能使三 Angular 形在所有视口(viewport)上保持相同的位置？

Answer 1

您可以通过向容器添加“相对位置”来做到这一点。

<div class="container-fluid info-div position-relative">
    <div class="row">
      <div class="col-12 col-sm-6 col-md-3">
        <div class="box"></div>
      </div>
      <p class="col-12 col-sm-6 col-md-9">Lorem ipsum dolor sit amet consectetur, adipisicing         elit. Dolorem odio porro
        obcaecati id ad illo
        accusantium maxime, corrupti deleniti doloremque.
      </p>
    </div>
  </div>

然后需要将底部箭头css从right:0%修改为left:100%

.info-div:before {
    bottom: -13px;
    left: 100%;
    border-top: 11px solid transparent;
    border-left: 20px solid black;
    border-bottom: 11px solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
}

和顶部箭头:

.info-div:after {
    top: -16px;
    left: -13px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 20px solid black;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
}