css放置和箭头指向图像？

我不知道如何才能将一个与div颜色相同的箭头指向图像文本。 一些想法？我该怎么做

html:

图像


文本

---

谢谢朋友们

我想你在找这样的东西：

#arrow {
  background-color: #FFD600;
  color: #fff;
  border-radius: 15px;
  padding: 5px;
  z-index: 999;
  max-width: 150px;
  position: relative;
}

#arrow:before {
  position: absolute;
  top: -10px;
  left: 20px;
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #ffd600;
}

例如：

---

您需要将带有css的三角形创建为一个伪元素，并将其相应地定位到所需的位置。

使用SVG内联或base64我希望箭头位于带有css的ballow中@MatthewRath/\n左上角指向图像文本的箭头您是说鼠标指针是箭头吗？还是一个箭头作为一种覆盖图像？@一些非描述性用户我更新了答案，如果你想了解更多关于css形状的信息，请查看：@Vangel Tzo:非常感谢你的链接。

 image<br><br>
    <div id="arrow">
    text
    </div>

#arrow {
  background-color: #FFD600;
  color: #fff;
  border-radius: 15px;
  padding: 5px;
  z-index: 999;
  max-width: 150px;
  position: relative;
}

#arrow:before {
  position: absolute;
  top: -10px;
  left: 20px;
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #ffd600;
}