0
私はCSSで "クランプ効果"を作りました。画像のクランプ効果としてのセレクタの後の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>
は、あなたの助けにシャハルありがとう役に立てば幸い!あなたのソリューションは機能しています。 – mariusfv