时间戳

首页 > 解决方案 > 让一个 div 的箭头进入另一个

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

问题描述

我需要实现这样的目标：

表示

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

.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 上。是否有可能以某种方式实现这一目标？对不起，我对前端设计很陌生

标签： htmlcssbootstrap-4

解决方案

你可以这样做：

.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>

推荐阅读