画像のクランプ効果としてのセレクタの後のCSS

Question

私はCSSで "クランプ効果"を作りました。

を参照してくださいイメージ： https://s27.postimg.org/j6m72z5kj/h_transylvania.png

私はこの効果が命名された方法を正確に知っていないので、私は「効果をクランプ」と呼びました。

::の後に誰かがなぜ「クランプ効果」を持つことができるのか教えてもらえますか？ - 画像とのリンクを参照してください。私のコード

：

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

絶対要素がそれに関係しますが、したがって、私はコンテナにposition: relativeを追加しました、それは非静的、デフォルト位置にいた場合にのみ、親です、この例では、

また、提供されているサンプル画像と一致するように必要な定義を修正しました。ここで

は、固定された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; 
} 

それとも持って自分でfiddle example

それは