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

Question

我需要实现以下目标：

representation

我发现了类似的问题，但它们并未完全涵盖我的任务。这是我发现的一个事例：

.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。是否可以通过某种方式实现这一目标？抱歉，我对前端设计还很陌生

Answer 1

您可以这样操作：

.wrapper {
  width: 10em;
  height: 2em; /* Height needs to match .right::after height and width */
  display: flex;
}

.left {
  background-color: lightblue;
  width: 50%;
}

.right {
  background-color: lightpink;
  border-left: 1px solid purple;
  width: 50%;
  position: relative;
  overflow: hidden;
}

.right:before {
  height: 2em; /* Match height above*/
  width: 2em; /* Match height above*/
  background-color: #b77681;
  position: absolute;
  top: 50%;
  left: 0%;
  content: "";
  border: 1px solid #864954;
  transform: translate(-73%, -50%) rotate(45deg);
}

<div class='wrapper'>
  <div class='left'>

  </div>
  <div class='right'>

  </div>
</div>

Answer 2

[我鼓励您阅读有关position属性的更多信息（在我们的情况下为absolute和relative）。 here您可以找到一些介绍。

根据您的问题，根据需要更改top中的left和.blue-background::after属性以适合箭头的位置。

这里是一个例子：https://jsfiddle.net/qa9un7fy/