How can i add arrow to image

Question

I want to add triangle arrow to right side of image, image have border-radius: 50% i made it with adding second div for arrow, and moving it to place i want, but how can i make it correctly without using second div.

This how it looks like: https://jsfiddle.net/kani339/0xeu28q5/1/

HTML:

<img src="https://www.aviary.com/img/photo-landscape.jpg" class="photo">
<div class="arrow"></div>

CSS:

.photo {
  border-radius:50%;
  width: 200px;
    height: 190px;
    border: 5px solid #41454f;
}

.arrow {
  position:relative;
  left:205px;
  bottom: 115px;
  width: 0; 
  height: 0; 
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #41454f;
}

@Vadim Ovchinnikov yes, i want to leave arrow, but not using another div element, can i add it some how to .photo class — Viktor, Dec 11 '16 at 09:38
You could create a border with arrow png image with transparent center, black border, and white outer area then overlay this border frame .png over your image. — zipzit, Dec 11 '16 at 09:50
Border images can be a bit iffy in support still ( http://caniuse.com/#search=border-image ) so be weary. You can use a pseudo, however pseudos do not work on images without doing some funky stuff, so you'd have to put a wrapper on your image which still involves an extra div so I'm not sure that's the solution you're looking for. here's an example if you're interested though: https://jsfiddle.net/4axyLnc0/ — DawnPatrol, Dec 11 '16 at 09:59

score 4 · Accepted Answer · edited Jul 30 '23 at 21:42

4

I think you're looking for something like pseudo element? By using pseudo element, we can attach additional element to an element. This feature lets you have additional element without writing second <div>.

The example below uses pseudo element :before to the .photo element. But keep in mind that this feature doesn't work with <img> tag, so you need to use your image as background instead. Check out the demo below

.photo {
  border-radius:50%;
  width: 200px;
  height: 190px;
  border: 5px solid #41454f;
  background: url("https://web.archive.org/web/20181130141645if_/https://aviary.com/img/photo-landscape.jpg") no-repeat center center / cover;
  background-position: initial;
  position: relative;
}

.photo::before {
  content: "";
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #41454f;
}

<div class="photo"></div>

edited Jul 30 '23 at 21:42

George Hawkins

37,044
7
30
43

answered Dec 11 '16 at 09:57

balapa

240
2
8

I didn't think of using background image like that, good solution +1 – sol Dec 11 '16 at 10:03
1

Great solution to the pseudo/img problem. Instead of using top and margin-top for positioning, I would personally recommend using top: 50%; and transform: translateY(-50%); The reasoning behind this is that you can then change the size of the arrow or the div with the image and still have everything centered perfectly. You can see it in action here: https://codepen.io/sebastianekstrom/pen/kzEhe/ Top: calc(50% - 7px); would also get you roughly center without the need to involve margin. – DawnPatrol Dec 11 '16 at 10:05
Yeah, that is better solution @DawnPatrol, I'll update the code - thanks! – balapa Dec 11 '16 at 10:10

score 0 · Answer 2 · edited May 23 '17 at 11:53

0

I'm not sure of a pure CSS solution.

You can do it with jQuery, like this:

$(function() {
    $('.photo').after('<div class="arrow"></div>');
});

Here's a demo

Credit to Christopher Harris

edited May 23 '17 at 11:53

Community

1
1

answered Dec 11 '16 at 09:45

sol

22,311
6
42
59

This adds an additional div element to the DOM. – J o Dec 11 '16 at 13:23

How can i add arrow to image

2 Answers2