Proprietà CSS clip-path

La proprietà clip-path definisce una regione di ritaglio: la parte di un elemento che rimane visibile. Tutto ciò che si trova al di fuori di quella regione viene nascosto — ma l'area nascosta occupa comunque spazio nel layout, semplicemente non viene disegnata. Questo permette di ritagliare gli elementi in forme non rettangolari (cerchi, esagoni, frecce, stelle) senza modificare le immagini o il markup sottostante.

A differenza del ritaglio di un'immagine raster in un editor, clip-path è puramente visivo e reversibile: l'elemento completo è ancora nel DOM, rimane cliccabile solo all'interno del ritaglio e può essere animato tra una forma e l'altra.

Questa proprietà accetta quattro tipi di valori:

<clip-source> — un url() che punta a un elemento SVG <clipPath>, per percorsi completamente personalizzati.
<basic-shape> — una funzione di forma CSS: circle(), ellipse(), inset() o polygon().
<geometry-box> — il riquadro di riferimento rispetto al quale viene misurata la forma (border-box, padding-box, content-box o margin-box).
none — nessun ritaglio; l'intero elemento viene mostrato (il valore predefinito).

clip-path sostituisce la proprietà deprecata, limitata ai rettangoli clip. Preferisci clip-path in tutto il nuovo codice: clip funzionava solo su elementi con posizionamento assoluto e non poteva produrre forme non rettangolari.

Quando usare clip-path

Visualizza avatar o miniature come cerchi o esagoni mantenendo un'immagine sorgente quadrata.
Crea divisori di sezione angolati o diagonali senza immagini di sfondo aggiuntive.
Rivela o nasconde contenuto con una forma animata (poiché i valori <basic-shape> sono animabili).
Costruisci ritagli decorativi, badge e frecce da un singolo elemento.

Per il testo che scorre intorno a una forma anziché ritagliare l'elemento, usa invece shape-outside.

Valore iniziale	none
Si applica a	Tutti gli elementi.
Ereditato	No
Animabile	Sì, se specificato per `<basic-shape>`.
Versione	CSS Masking Module Level 1
Sintassi DOM	object.style.clipPath = "none";

Sintassi

clip-path: <clip-source> | <basic-shape> | <geometry-box> | none | initial | inherit | unset;

Le funzioni basic-shape

Queste quattro funzioni coprono quasi ogni esigenza di ritaglio. Le coordinate possono usare qualsiasi lunghezza CSS o percentuale; le percentuali sono relative al riquadro di riferimento.

circle(radius at cx cy) — un cerchio. Esempio: circle(50% at 50% 50%) inscrive il cerchio più grande centrato sull'elemento.
ellipse(rx ry at cx cy) — un'ellisse con raggi orizzontale e verticale separati.
inset(top right bottom left round <radius>) — un rettangolo rientrato da ogni bordo, con una parola chiave round opzionale per angoli arrotondati.
polygon(x1 y1, x2 y2, …) — un poligono arbitrario definito da un elenco di vertici, in senso orario. polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) produce un rombo.

Per le forme che non puoi esprimere con queste funzioni, fai riferimento a un <clipPath> SVG: clip-path: url(#myClip).

Esempio della proprietà clip-path:

Esempio della proprietà CSS clip-path con valore basic-shape

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #eee;
      }
      .container {
        display: grid;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 200px 200px 200px;
        grid-gap: 20px;
        justify-content: center;
      }
      .container div {
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-position: center;
        background-size: cover;
        color: #000;
        font-size: 18px;
        font-family: sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .example {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }
    </style>
  </head>
  <body>
    <h1>Clip-path property example</h1>
    <div class="container">
      <div class="example">polygon</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Risultato

L'immagine quadrata viene ritagliata a forma di rombo — gli angoli sono nascosti mentre il riquadro di layout rimane 200×200.

Esempio della proprietà clip-path con tutti i valori:

Esempio della proprietà CSS clip-path con valori globali e basic-shape

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #eee;
      }
      .container {
        display: grid;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 200px 200px 200px;
        grid-gap: 20px;
        justify-content: center;
      }
      .container > div {
        background-image: url(/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg);
        background-position: center;
        background-size: cover;
        color: #000;
        font-size: 18px;
        font-family: sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .box1 {
        clip-path: none;
      }
      .box2 {
        clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
        /* values are from-top, from-right, from-bottom, from-left, and optional round keyword for border-radius */
      }
      .box3 {
        clip-path: circle(50% at 50% 50%);
      }
      .box4 {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }
      .box5 {
        clip-path: ellipse(90px 50px at 100px 100px);
      }
      .box6 {
        clip-path: inherit;
      }
      .box7 {
        clip-path: initial;
      }
      .box8 {
        clip-path: unset;
      }
    </style>
  </head>
  <body>
    <h2>Clip-path property example</h2>
    <div class="container">
      <div class="box1">none</div>
      <div class="box2">inset</div>
      <div class="box3">circle</div>
      <div class="box4">polygon</div>
      <div class="box5">ellipse</div>
      <div class="box6">inherit</div>
      <div class="box7">initial</div>
      <div class="box8">unset</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Animare clip-path

Quando sia lo stato iniziale che quello finale usano la stessa funzione <basic-shape> con lo stesso numero di punti, i browser possono interpolare fluidamente tra di essi. Questo rende possibili le rivelazioni e le morfosi di forma con una transition o un'animation:

.reveal {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.4s ease;
}
.reveal:hover {
  clip-path: circle(75% at 50% 50%);
}

Un polygon() si anima solo verso un altro polygon() con lo stesso numero di vertici, quindi mantieni uguali i conteggi dei punti su entrambi gli estremi.

Supporto del browser e suggerimenti

clip-path con valori <basic-shape> è supportato in tutti i browser moderni. Le versioni precedenti richiedevano il prefisso -webkit-; oggi una dichiarazione senza prefisso è sufficiente per i browser evergreen.
L'area nascosta viene rimossa solo visivamente — influisce comunque sul layout e non è cliccabile, quindi il resto della pagina non è interessato.
Un ritaglio può nascondere contorni, box-shadow e anelli di focus che ricadono al di fuori della forma; verifica che il focus da tastiera rimanga visibile.

Valori

Valore	Descrizione
`<clip-source>`	L'`<url>` che fa riferimento a un elemento SVG `<clipPath>`.
`<basic-shape>`	Una funzione di forma di base come `circle()`, `ellipse()`, `inset()` o `polygon()`. Può essere combinata con un `<geometry-box>` usando una barra (`/`).
`<geometry-box>`	Definisce il riquadro di riferimento per la forma di base (ad es., `border-box`, `padding-box`, `content-box`, `margin-box`).
none	Non viene creato alcun percorso di ritaglio.

Nota: initial, inherit e unset sono valori CSS globali e possono essere usati con qualsiasi proprietà.

Esercitati

Pratica

Cosa fa la proprietà CSS clip-path?

Definisce una regione di ritaglio che può essere applicata a qualsiasi elemento HTML o SVG per controllarne la porzione visibile.Aggiunge un colore di sfondo a un elemento.Regola la dimensione del testo all'interno di un elemento.Controlla la forma della regione di ritaglio che determina quale parte di un elemento deve essere mostrata.Regola il margine attorno a un elemento.