CSS nach Selektor als Klammereffekt über Bild

Question

Ich habe versucht, in CSS einen "Klammereffekt" zu machen.

Siehe Bild: https://s27.postimg.org/j6m72z5kj/h_transylvania.png

ich nicht genau weiß, wie dieser Effekt genannt wird, so rief ich ihn an „Klammer-Effekt“.

Kann mir jemand sagen, warum :: nach nicht funktioniert? (Um diesen "Klammereffekt" zu haben - siehe Link mit dem Bild).

Mein Code:

h2 { 
 
    margin-top: 40px; 
 
} 
 
.container { 
 
    background-color: #fff; 
 
    width: 250px; 
 
    height: auto; 
 
    padding: 20px; 
 
} 
 
img.mypicture { 
 
    width: 230px; 
 
} 
 
.recomandded { 
 
position: absolute; 
 
display: inline-block; 
 
top: 125px; 
 
left: 1px; 
 
color: #fff; 
 
background-color: #ff0047; 
 
font-size: 13px; 
 
font-weight: 700; 
 
font-family: Lato,Arial,sans-serif; 
 
padding: 3px 16px 3px 6px; 
 
border-radius: 4px 0 0 4px; 
 
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4); 
 
} 
 
.recomandded::after { 
 
content: ""; 
 
display: inline-block; 
 
border: 6px solid #dd0843; 
 
border-bottom-color: transparent; 
 
border-right-color: transparent; 
 
position: absolute; 
 
top: 29px; 
 
left: 0; 
 
}

<div class="container"> 
 
<h2>Beautiful Flower</h2> 
 
<img class="mypicture" src="https://upload.wikimedia.org/wikipedia/commons/f/fe/Frangipani_flowers.jpg" /> 
 
<div class="recomandded">RECOMMENDED</div> 
 
</div>

Answer 1

Ein absolutes Element wird beziehen sich auf das Mutter ist nur, wenn sie in nicht statisch, Standard, Position ist daher habe ich position: relative in den Behälter gegeben , in dem Beispiel.

Ich habe auch die erforderlichen Definitionen korrigiert, um dem bereitgestellten Beispielbild zu entsprechen.

Hier ist die feste CSS:

h2 { 
    margin-top: 40px; 
} 
.container { 
    position: relative; 
    background-color: #fff; 
    width: 250px; 
    height: auto; 
    padding: 20px; 
} 
img.mypicture { 
    width: 230px; 
} 
.recomandded { 
position: absolute; 
display: inline-block; 
top: 125px; 
left: 8px; 
color: #fff; 
background-color: #ff0047; 
font-size: 13px; 
font-weight: 700; 
font-family: Lato,Arial,sans-serif; 
padding: 3px 16px 3px 6px; 
border-radius: 4px 0 0 4px; 
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4); 
} 
.recomandded::after { 
content: ""; 
display: inline-block; 
border: 6px solid #dd0843; 
border-bottom-color: transparent; 
border-left-color: transparent; 
position: absolute; 
top: 20px; 
left: 0; 
} 

Oder haben Sie sich ein fiddle example

Hoffe, es