在左側有一個箭頭的正方形DIV元素，保持固定

Question

我正在嘗試使箭頭保持固定的DIV。

現在arrow_box中的內容決定了箭頭的位置。

無論如何，我該如何將它置於固定位置？請運行該代碼片段，看看我的意思是：

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

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

 
.arrow_box:after { 
 
\t border-color: rgba(136, 183, 213, 0); 
 
\t border-right-color: #88b7d5; 
 
\t border-width: 10px; 
 
\t margin-top: -10px; 
 
} 
 
.arrow_box:before { 
 
\t border-color: rgba(194, 225, 245, 0); 
 
\t border-right-color: #c2e1f5; 
 
\t border-width: 11px; 
 
\t 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>