css放和箭頭指向圖像？

Question

我不知道如何將箭頭放在指向圖像文本的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三角形爲僞元素，並將其定位到所需位置。