html - 在调整大小时如何使箭头的位置固定在框中？

Question

这是我的响应框代码。在调整大小时，我无法使箭头的位置固定在框中。你能帮我看看问题出在哪里吗？以及是否有更好的方法来使用图像？

我想做这样的事情:

.boxes {
width: 80%;
border: 1px solid #dfe8f1;
border-radius: 3px;
margin: 2% auto;
padding: 15px;
height: 25%;
position: relative;
}

.arrow-box {
width: 11px;
height: 20px;
margin: -39px 0 0 -25px;
position: absolute;
}

<div class="boxes">                                    
<div class="blue-header">appointment</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dones odio.</p>
<img src="./images/arrow-for-box.jpg" class="arrow-box">
<div class="footer">
    <img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QMsaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0OCA3OS4xNjQwMzYsIDIwMTkvMDgvMTMtMDE6MDY6NTcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1QzBDMURGQjE3RkMxMUVBOTY4Q0IxRjQ0MTdBQzM5RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1QzBDMURGQzE3RkMxMUVBOTY4Q0IxRjQ0MTdBQzM5RiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVDMEMxREY5MTdGQzExRUE5NjhDQjFGNDQxN0FDMzlGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVDMEMxREZBMTdGQzExRUE5NjhDQjFGNDQxN0FDMzlGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/8AAEQgAFAALAwERAAIRAQMRAf/EAHQAAAMBAAAAAAAAAAAAAAAAAAQFBwoBAQEBAAAAAAAAAAAAAAAAAAABAhAAAAMGBQAIBwAAAAAAAAAAAgMEARITFAUVABEiBhYhMUFCI2NklCU1RYUmF0cRAAIBBAMAAAAAAAAAAAAAAAARAfAhMaFBsSL/2gAMAwEAAhEDEQA/AN5tYrCw1Zx3bsIytmFANWrTQRkO20JzzAL14GCCw9aewIpRI8ER4gtEJoSQjGwAbhCGBL3bcEOTh/MQRLvcLnyiPLRuQTfeeloXhQYWjFc4dqkijKvUAdG/Dlo6HUtaGtVRSrpO4zOk1fUqga0wVJ3Ce36x1Foz25FqiAAJYwBpYAmwpQMAKa7Z7PUeQStllTLjO5S8vlqf7Xs8nHdb+TurLAEt+OSX9AmbP5sxxLkHsv2BafuUr6rGvK5a2+lsz6fCel29H//Z
" alt="clock">
    <i>a few seconds ago</i>
</div>
</div>

Answer 1

我根据您的要求创建了一个 jsfiddle: https://jsfiddle.net/kLnh6vsm/

我添加了以下代码:

.arrow {
  width: 20px;
  height: 20px;
  border-left: 1px solid #dfe8f1;
  border-top: 1px solid #dfe8f1;
  position: absolute;
  left: -12px;
  top: 45%;
  background-color: #fff;
  transform: rotate(-45deg);
}

并删除了图像。