画像に矢印を追加するにはどうすればいいですか？

Question

画像の右側に三角形の矢印を追加したい場合は、画像にborder-radius：50％ を追加します。どのように私は正しく2番目の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

私はあなたが擬似要素のようなものを探していると思いますか？擬似要素を使うことで、要素に要素を追加することができます。この機能を使用すると、2番目の書き込みなしで追加の要素を持つことができます<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