어떻게 이미지에 화살표를 추가 할 수 있습니까

Question

이미지의 오른쪽에 삼각형 화살표를 추가하고 싶습니다. 이미지에 border-radius가 있습니다 : 50 % 화살표로 두 번째 div를 추가하고 그것을 원하는 위치로 이동하여 만들었지 만 두 번째 div를 사용하지 않고 어떻게 올바르게 만들 수 있습니까?

이 그것이 어떻게 보이는지 같은 : 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; 
} 

Answer 1

난 당신이 의사 요소와 같은 뭔가를 찾고 있다고 생각? 의사 요소를 사용하여 요소에 요소를 추가 할 수 있습니다. 이 기능을 사용하면 두 번째 문자를 쓰지 않고 추가 요소를 가질 수 있습니다. <div>.

아래 예제는 :before을 .photo 요소에 사용합니다. 하지만 <img> 태그에서는이 기능이 작동하지 않으므로 이미지를 배경으로 사용해야합니다. 네,`

를 제거`하지만 그대로 화살표를 떠나

.photo { 
 
    border-radius:50%; 
 
    width: 200px; 
 
    height: 190px; 
 
    border: 5px solid #41454f; 
 
    background: url("https://www.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>

Answer 2

나는 순수 CSS 솔루션의 확실하지 않다.

이 같은 jQuery를 함께 할 수 있습니다

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

Here's a demo

Credit to Christopher Harris