4-클립패스

예제1

HTML

<div class="frame-wrap">
  <img src="https://placedog.net/400" class="photo">
</div>

CSS

  .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

<div class="frame-wrap">
  <img src="https://placedog.net/400" class="photo">
</div>

CSS

    .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

<div class="frame-wrap">
  <img src="https://placedog.net/400" class="photo">
</div>

CSS

  .photo {
    width: 400px;
    animation: show 4s forwards;
  }

  @keyframes show {
    from {
      /* 완전히 가려짐 */
      clip-path: inset(50% 50%);
    }
    to {
      /* 완전히 보임 */
      clip-path: inset(0 0);
    }
  }