一个方形DIV元素，左侧有一个箭头，保持固定

Question

我试图用箭头固定DIV。

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

无论如何，我如何将它固定在固定位置？请运行此代码段以查看我的意思：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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>