This profile card is extremely cute. Using clip-path we forge a CSS heart shape. Using 3D CSS transforms (rotateY), the locket mechanically splits open like jewelry!

The Heart Clip Path

.heart {
  clip-path: polygon(50% 15%, 61% 0, 85% 0, 100% 25%, 100% 50%, 50% 100%, 0 50%, 0 25%, 15% 0, 39% 0);
  background: #f43f5e;
}

The 3D Hinge Transform

.locket-cover {
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.locket:hover .locket-cover {
  transform: rotateY(-180deg);
}

Hover over the locket in the Live Demo to unlock the profile!