Sintassi

Significato dei valori principali:

• circle(): Ritaglia in una forma circolare. Es. circle(50% at center)

• ellipse(): Ritaglia in forma ellittica. Es. ellipse(60% 40% at 50% 50%)

• inset(): Ritaglia con margini rettangolari (simile a padding). Es. inset(10% 20%)

• polygon(): Specifica un poligono con coordinate. Es. polygon(50% 0%, 100% 100%, 0% 100%)

• url(): Usa una forma da un file SVG esterno. Es. url(#clipPathId)

• none: Nessun ritaglio applicato. Mostra l'intero elemento.

Esempio proprietà: clip-path

Codice Esempio: clip-path

CODE: CSS

1. .clip-path-example {

2.   width: 300px;

3.   height: 200px;

4.   background-color: #4078f2;

5.   color: white;

6.   clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

7.   padding: 20px;

8.   font-size: 18px;

9.   text-align: center;

10.   line-height: 160px;

11.   margin-bottom: 30px;

12.   border-radius: 8px;

13. }

Contenuto Esempio: clip-path

  
  <style>
    .clip-path-example {
      width: 300px;
      height: 200px;
      background-color: #4078f2;
      color: white;
      clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
      padding: 20px;
      font-size: 18px;
      text-align: center;
      line-height: 400px;
      margin-bottom: 10px;
      border-radius: 8px;
    }
  </style>
  
  <div class="clip-path-example">
    Elemento ritagliato con <code>clip-path</code>
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser