How Does clip-path Work?

.element {
  /* Circle */
  clip-path: circle(50%);

  /* Ellipse */
  clip-path: ellipse(50% 30% at 50% 50%);

  /* Inset (rectangle) */
  clip-path: inset(10px 20px 30px 40px);

  /* Polygon */
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* Triangle */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

/* Hexagon */
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

/* Arrow */
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

.element {
  clip-path: circle(0%);
  transition: clip-path 0.5s;
}

.element:hover {
  clip-path: circle(100%);
}