css - 左侧带箭头的方形 DIV 元素，保持固定

Question

我正在尝试使带有箭头的 DIV 保持固定。

现在 arrow_box 中的内容决定了箭头的位置。

无论如何，我如何将它固定在固定位置？请运行此代码片段以了解我的意思:

body {
width: 500px;
margin: 100px;
}

.arrow_box {
	position: relative;
	background: #88b7d5;
	border: 4px solid #c2e1f5;
  min-height: 50px;
  padding: 10px;
}
.arrow_box:after, .arrow_box:before {
	right: 100%;
	top: 20%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
	border-right-color: #88b7d5;
	border-width: 10px;
	margin-top: -10px;
}
.arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
	border-right-color: #c2e1f5;
	border-width: 11px;
	margin-top: -11px;
}

<div class="arrow_box">
Hello
</div>
<br>
<div class="arrow_box">
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
</div>

Answer 1

您想将箭头固定在每个盒子的相同位置吗？只需在 .arrow_box:after, .arrow_box:before 上将 top:20%; 替换为 top:10px;。试试这个解决方案:

body {
  margin:100px;
  width:500px;
}
.arrow_box {
  background:#88b7d5;
  border:4px solid #c2e1f5;
  margin-bottom:10px;
  min-height:50px;
  padding: 10px;
  position:relative;
}
.arrow_box:after,
.arrow_box:before {
  border:1px solid transparent;
  content:" ";
  height:0;
  pointer-events:none;
  position:absolute;
  right:100%;
  top:10px;
}
.arrow_box:after {
  border-color:rgba(136, 183, 213, 0);
  border-right-color:#88b7d5;
  border-width:10px;
  margin-top:-10px;
}
.arrow_box:before {
  border-color: rgba(194, 225, 245, 0);
  border-right-color: #c2e1f5;
  border-width:12px;
  margin-top:-12px;
}

<div class="arrow_box">Hello</div>
<div class="arrow_box">
  Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
  Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
</div>