Il Clip-path è una proprietà CSS rilasciata nel 2016. Perché, pur essendo disponibile da così tanto tempo, non ne sentiamo mai parlare e, soprattutto, a cosa potrebbe servirci per la nostra libreria CSS?

Lo scopo del Clip-path è semplice: crea una forma geometrica all'interno dell'elemento in cui viene applicata, rendendo visibile tutto quello che vi è all'interno e invisibile ciò che stà all'esterno. Il problema nel suo utilizzo è proprio nella descrizione: creare una forma geometrica e gestirla non è banale.

Facciamo un esempio di un div che tramite la proprietà scomparirà verso il centro formando un cerchio e si riaprirà a metà dell'animazione

.box {
  animation: circle 3s infinite;
  background: orange;
  height: 200px;
  width: 200px;
}

@keyframes circle {
  /* un cerchio con raggio 75% delle dimensioni del quadrato è sufficiente a coprire tutta l'area del quadrato */ 
  0% { clip-path: circle(75%); }
  50% { clip-path: circle(25%); }
  100% { clip-path: circle(75%); }
}

Se volessimo spostare il centraggio dell'animazione, possiamo utilizzare il secondo argomento, per definire la posizione spaziale della forma

@keyframes circle {
  /* [...] */ 
  /* cerchio che si chiuderà verso il lato sinistro*/ 
  50% { clip-path: circle(25% 0%); }
  /* cerchio che si chiuderà a metà strada tra il centro e il lato destro*/ 
  50% { clip-path: circle(25% 75%); }
  /* [...] */ 
}

Il cerchio non è la sola forma disponibile, troviamo anche: Ellipse, Inset per un rettangolo a cui definire i bordi e il raggio, polygon che ci permette di creare forme complesse.

Ora che ne abbiamo dato una definizione, come può tornarci utile? Applicandola ad un button, una card, un link o una voce di menù, possiamo creare animazioni all'hover, ad un cambio stato o cicliche tramite animazioni.

Nel codice sottostante l'effetto è un riempimento dall'interno verso l'esterno di colore arancione in fase di hover. Dato che Clip-path lavora sulla visibilità non possiamo applicarla direttamente al bottone, utilizziamo quindi il before dell'elemento.

<style>
.btn-clip {
    position: relative;
    overflow: hidden;
    background: transparent;
    color:black;
    transition: 0.5s ease-in-out;
}
.btn-clip::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #ff5722;
    clip-path: circle(0% at 50% 50%);
    transition: 0.5s ease-in-out;
}
.btn-clip span{
    /* permette al testo di stare sempre sopra tutti gli altri elementi */ 
    position:relative;
    z-index: 1;
}
.btn-clip:hover {
    color:#fff;
}
.btn-clip:hover::before {
    clip-path: circle(100% at 50% 50%);
}
</style>
<a href="#" class="btn-clip btn btn-secondary"><span>Hover me</span></a>