在HTML上方绘制箭头

<div class="arrow-container">
  <div class="arrow"></div>
</div>

.arrow-container {
  position: relative;
  height: 100px;
}

.arrow {
  position: absolute;
  top: -20px; /* 调整箭头位置 */
  left: 50%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black; /* 调整箭头颜色 */
  transform: translateX(-50%); /* 居中箭头 */
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="arrow">
  <path d="M12 22s-8-4.5-8-10a8 8 0 0 1 16 0c0 5.5-8 10-8 10z" fill="black" />
</svg>