css put和箭头指向IMAGE？

Question

我不知道如何将箭头指向我指向IMAGE文本的div的相同颜色。 一些想法？我怎么能这样做？

https://jsfiddle.net/fvvrLqLp/

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

HTML：

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

谢谢你的朋友们！

Answer 1

我想你正在寻找类似的东西：

#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;
}

示例：https://jsfiddle.net/fvvrLqLp/1/

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