4 클립패스
예제1
- HTML
- CSS
<div class="frame-wrap">
<img src="https://placedog.net/400" class="photo">
</div> .frame-wrap {
width: 400px;
padding: 20px 40px; /* 액자 두께 */
background: #8B4513; /* 액자 색 (갈색) */
box-shadow: inset 0 0 10px rgba(0,0,0,0.5); /* 입체감 */
}
.photo {
width: 400px;
height: 300px;
object-fit: cover;
/* 이미지 가장자리를 잘라서 액자가 더 잘 보이게 */
/* clip-path: inset(30px); */
clip-path: polygon(
20% 0%, 80% 0%,
100% 20%, 100% 80%,
80% 100%, 20% 100%,
0% 80%, 0% 20% );
}<div class="frame-wrap">
<img src="https://placedog.net/400" class="photo">
</div> .frame-wrap {
width: 400px;
padding: 20px 40px; /* 액자 두께 */
background: #8B4513; /* 액자 색 (갈색) */
box-shadow: inset 0 0 10px rgba(0,0,0,0.5); /* 입체감 */
}
.photo {
width: 400px;
height: 300px;
object-fit: cover;
/* 이미지 가장자리를 잘라서 액자가 더 잘 보이게 */
/* clip-path: inset(30px); */
clip-path: polygon(
20% 0%, 80% 0%,
100% 20%, 100% 80%,
80% 100%, 20% 100%,
0% 80%, 0% 20% );
}예제2
- HTML
- CSS
<div class="frame-wrap">
<img src="https://placedog.net/400" class="photo">
</div> .frame-wrap {
width: 400px;
padding: 20px 40px;
/* 액자 두께 */
background: #8B4513;
/* 액자 색 (갈색) */
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
/* 입체감 */
}
.photo {
width: 400px;
clip-path: inset(50px);
transition: clip-path 0.5s;
}
.photo:hover {
clip-path: inset(0);
}<div class="frame-wrap">
<img src="https://placedog.net/400" class="photo">
</div> .frame-wrap {
width: 400px;
padding: 20px 40px;
/* 액자 두께 */
background: #8B4513;
/* 액자 색 (갈색) */
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
/* 입체감 */
}
.photo {
width: 400px;
clip-path: inset(50px);
transition: clip-path 0.5s;
}
.photo:hover {
clip-path: inset(0);
}예제3
- HTML
- CSS
<div class="frame-wrap">
<img src="https://placedog.net/400" class="photo">
</div> .photo {
width: 400px;
animation: show 4s forwards;
}
@keyframes show {
from {
/* 완전히 가려짐 */
clip-path: inset(50% 50%);
}
to {
/* 완전히 보임 */
clip-path: inset(0 0);
}
}<div class="frame-wrap">
<img src="https://placedog.net/400" class="photo">
</div> .photo {
width: 400px;
animation: show 4s forwards;
}
@keyframes show {
from {
/* 완전히 가려짐 */
clip-path: inset(50% 50%);
}
to {
/* 완전히 보임 */
clip-path: inset(0 0);
}
}