w3.unpo<code>todo

Recortar con clip-path

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 ).

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.

.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