4 클립패스
예제1
- HTML
- CSS
<div class="frame-wrap"> .frame-wrap {
<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"> .frame-wrap {
<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"> .photo {
<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); } }