<div class="container">
  <div class="object">
    <img src="https://res.cloudinary.com/pamcy/image/upload/v1543992134/coding/sad_dog.jpg" alt="" class="object__img">
    <div class="object__intro">
      <h1 class="object__intro-title">CSS Only Trick</h1>
      <p class="object__intro-text">The arrow change its body length while still always point to a certain position, even you resize the widow.</p>
    </div>
  </div>

  <div class="arrow">
    <div class="arrow__body"></div>
  </div>
</div>

:root {
  --bg-color: #34314c;
  --highlight-color: #ff7473;
}

html {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "PingFang TC", "Heiti TC", 微軟正黑體, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  width: 100%;
  height: 100vh;
  background: var(--bg-color);
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.object {
  position: relative;
  width: 200px;
  height: 200px;
  z-index: 1;
}

.object__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 5px solid var(--highlight-color);
  border-radius: 50%;
}

.object__intro {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 300px;
  padding-left: 20px;
  color: var(--highlight-color);
}

.object__intro-text {
  line-height: 1.5;
}

.arrow {
  position: fixed;
  bottom: 0;
  left: 150px;
  width: calc(50% - 200px);
  height: 40%;
  /* uncomment to see the arrow's rectangle bg*/
/*   background: white;  */
}

.arrow__body {
  width: 100%;
  height: 95%;
  margin-left: 11px;
  border-width: 5px 0 0 5px;
  border-style: dashed;
  border-color: var(--highlight-color);
  border-top-left-radius: 100%;
}

.arrow__body::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  border-width: 20px 15px 0;
  border-style: solid;
  border-color: var(--highlight-color) transparent transparent;
}

@media (max-width: 768px) {
  .object__intro {
    top: -100%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 70vw;
    padding: 0;
  }
}