bbs-go-site

我需要实现以下目标：

我发现了类似的问题，但是它们并不能完全解决我的任务。这是我发现的一个事例：

.blue-background {
  background-color: blue;
  border-radius: 5px;
  top: 3em;
  left: 230px;
  padding: 10px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: #313333;
  display: flex;
  align-items: center;
  width: 260px;
}

.blue-background::after {
  content: ' ';
  width: 0px;
  height: 0px;
  border-top: 25px solid transparent;
  border-left: 37px solid blue;
  border-bottom: 25px solid transparent;
  border-right: 0px solid transparent;
  position: absolute;
  top: 43%;
  left: 47%;
}

.child-image-wrapper {
  max-width: 260px;
  margin: auto;
  img {
    max-width: 260px;
  }
}

<div class="col-md-4 col-xs-12">
  <div class="image-block">
    <div class="blue-background">
      <h2>Some Text <span class="arrow"></span></h2>

    </div>
    <div class="child-image-wrapper">
      <img src="This is an image" />
    </div>
  </div>

现在，上述CSS的问题在于，它仅适用于特定的屏幕尺寸（如585px左右），否则箭头“脱离”左div并进入右div。我需要的是即使屏幕尺寸发生变化，蓝色箭头也要停留在左div。是否可以通过某种方式实现这一目标？对不起，我对前端设计还很陌生

让一个div的箭头进入另一个