CSS Rect Function Basic

<!DOCTYPE html>
<title>My Example</title>

.rect-box {
    width: 300px;
    height: 200px;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    
    /* 
      rect(top right bottom left round border-radius)
      top: 20px from top
      right: 280px from left
      bottom: 180px from top
      left: 20px from left
    */
    clip-path: rect(20px 280px 180px 20px round 15px);
    
    transition: clip-path 0.4s ease-in-out;
    cursor: pointer;
  }

/* Expand the rectangle to reveal the full box on hover */
  .rect-box:hover {
    clip-path: rect(0px 300px 200px 0px round 0px);
  }
</style>

<div class="rect-container">
  <div class="rect-box">
    Hover Me!
  </div>
</div>