CODEWITHSUNDEEP
css
RGS
RGS

Reputation: 4253

css put and arrow pointing to IMAGE?

I have no idea how can I put an arrow in the same color of my div pointing to the IMAGE text. Some ideas? how can I do this?

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>

thank you friends!

Upvotes: 1

Views: 1399

Answers (1)

Vangel Tzo
Vangel Tzo

Reputation: 9303

I suppose you're looking for something like that:

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

An example: https://jsfiddle.net/fvvrLqLp/1/

You need to create the triangle with css into a pseudo element and position it accordingly to the needed position.

Upvotes: 3

Related Questions