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