コピペで使える画像リンクをご紹介します。
画像の角に円形ボタンを設置しますが、ボタンに沿って画像の角がえぐれるようにします。
◆まずはデモページをご覧ください。
デモページを見る
アイコンフォントを使用しているので、「Font Awesome」を読み込んでおいてください。
HTML
<img src="img/dog.jpg" alt="dog">
<div class="image_btn"><a href="#" class="image_icon"><i class="fas fa-arrow-right"></i></a></div>
</div>
CSS
position: relative;
height: 20rem;
border-radius: 1.5rem;
overflow: hidden;
}
.image_box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image_btn {
position: absolute;
bottom: -0.375rem;
right: -0.375rem;
width: 6rem;
height: 6rem;
background: #fff;
border-top-left-radius: 50%;
}
.image_btn::before {
position: absolute;
content: "";
bottom: 0.375rem;
left: -1.25rem;
width: 1.25rem;
height: 1.25rem;
border-bottom-right-radius: 1.25rem;
box-shadow: 0.313rem 0.313rem 0 0.313rem #fff;
background: transparent;
}
.image_btn::after {
position: absolute;
content: "";
top: -1.25rem;
right: 0.375rem;
width: 1.25rem;
height: 1.25rem;
border-bottom-right-radius: 1.25rem;
box-shadow: 0.313rem 0.313rem 0 0.313rem #fff;
background: transparent;
}
.image_icon {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
inset: 0.625rem;
border-radius: 50%;
background: #e7bbaa;
transition: 0.3s;
}
.image_icon i {
color: #fff;
}
.image_icon:hover {
transform: scale(1.1);
}
コピペで使えますが、細かい調整を行う場合は、数値を変更いただけたらと思います。