Recortar con clip-path

facebook-svg gplus-svg twitter-svg

La propiedad clip-path de CSS3 es todavía una tecnología experimental. Para una mejor experiencia por favor abra este documento en Chrome 24+, Safary 8+ o Opera 15+

La propiedad clip-path es parte del nuevo módulo de máscaras ( Masking Module) de CSS3 y la podemos utilizar para recortar imágenes ( y no solo imagenes ).

test clip-path
test clip-path
test clip-path
test clip-path
test clip-path
test clip-path

Palabras clave

Para recortar imágenes ( y no solo ) necesitamos un trazado que marque la línea de recorte.
Por ejemplo podemos utilizar un polígono:

img{-webkit-clip-path: polygon(31px 141px, 4px 58px, 75px 6px, 146px 58px, 119px 141px);}

o un circulo:

img{-webkit-clip-path: circle(50% at 50% 50%);}

o una elipse:

img{-webkit-clip-path: ellipse(50% 35% at 50% 50%);}

También podemos utilizar la palabra clave inset para crear un rectángulo de recorte:

img{-webkit-clip-path: inset(10% 20% 15% 10%);}

La palabra clave inset es muy interesante ya que nos permite recortar aquella parte de la imagen que nos interesa, y también podemos crear esquinas redondeadas utilizando la palabra clave round.

img{-webkit-clip-path: inset(10% round 10px);}

Si quiere saber más acerca de circle vea este codepen.
Para saber más acerca de inset vea este otro codepen
.

Unidades de medida

En los ejemplos anteriores hemos utilizado como unidades de medida pixeles y porcientos, pero podemos utilizar prácticamente cualquier unidad de medida aceptada en CSS ( em, rem, vw, vh, etc.).
También podemos utilizar el método calc() que, como sabemos, nos permite calcular el valor de las unidades de longitud.

Soporte en los navegadores

http://caniuse.com/#feat=css-clip-path
La mala noticia es que esta sintaxis es compatible solo con algunos navegadores ( Chrome 24+, Safary 8+ y Opera 15+) y para que funcione tenemos que utilizar el prefijo -webkit-.
La buena noticia ( pero no os alegráis demasiado ) es que podemos utilizar un trazado SVG para marcar la línea de recorte en Firefox 3.5+ .

<svg height="0" width="0">
    <defs>
        <clipPath id="svgPath">
           <polygon points="31,141 4,58 75,6 146,58 119,141"/>
        </clipPath>
   </defs>
</svg>
img{ clip-path: url(#svgPath);}

Utilizar trazados SVG como línea de recorte es soportado tanto en Firefox como en Chrome Safari y Opera. Sin embargo en estos últimos tres navegadores existe un problema bastante importante ya que los trazados de recorte aparecen clavados a la esquina izquierda arriba del documento.

La solución a este problema es utilizar una combinación de las dos sintaxis.

img{
  -webkit-clip-path: polygon(31px 141px, 4px 58px, 75px 6px, 146px 58px, 119px 141px);
  clip-path: url(#svgPath);
}

Donde el trazado SVG tiene este aspecto:

<svg height="0" width="0">
    <defs>
        <clipPath id="svgPath">
           <polygon points="31,141 4,58 75,6 146,58 119,141"/>
        </clipPath>
   </defs>
</svg>

Por favor fijense en el parecido de los dos trazados ( CSS y SVG )

polygon(31px 141px, 4px 58px, 75px 6px, 146px 58px, 119px 141px);
<polygon points="31,141 4,58 75,6 146,58 119,141"/> 

Veamos de nuevo el ejemplo de arriba.

test clip-path
test clip-path
test clip-path
test clip-path
test clip-path
test clip-path

test clip-path
test clip-path
test clip-path
test clip-path
test clip-path
test clip-path

.cp {
  display: inline-block;
  border: 1px solid #d9d9d9;
  margin: 3px;
  padding: 0;
  width: 150px;
  height: 150px;
}

.cp:after {
  content: "";
  font-style: italic;
  font-family: serif;
  padding-top: .5em;
  display: block;
  width: 100%;
  text-align: center;
}

img {
  margin: 0;
}

.cp:nth-of-type(1):after {
  content: "original"
}

.cp:nth-of-type(2):after {
  content: "polygon"
}

.cp:nth-of-type(2) img {
  -webkit-clip-path: polygon(31px 141px, 4px 58px, 75px 6px, 146px 58px, 119px 141px);
  clip-path: url(#svgHexagon);
}

.cp:nth-of-type(3):after {
  content: "circle"
}

.cp:nth-of-type(3) img {
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: url(#svgCircle);
}

.cp:nth-of-type(4):after {
  content: "ellipse"
}

.cp:nth-of-type(4) img {
  -webkit-clip-path: ellipse(50% 35% at 50% 50%);
  clip-path: url(#svgElipse);
}

.cp:nth-of-type(5):after {
  content: "inset"
}

.cp:nth-of-type(5) img {
  -webkit-clip-path: inset(10% 20% 15% 10%);
  clip-path: url(#svgRect);
}

.cp:nth-of-type(6):after {
  content: "round"
}

.cp:nth-of-type(6) img {
  -webkit-clip-path: inset(10% round 10px);
  clip-path: url(#svgBradius);
}

Vea este ejemplo en codepen