Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad CSS clip-path proviene que una porción de un elemento se muestre definiendo una región de recorte para mostrarse, es decir, solo una parte especifica del elemento se mostrara. La región recortada es un path especificado como una URL referenciando a un SVG inline o externo, o un metodo de figura como lo es circle(). La propiedad clip-path reemplaza la ahora deprecada propiedad clip.

/* Valores clave */
clip-path: none;

/* Valores de imagen */ 
clip-path: url(resources.svg#c1);

/* Valores de caja */
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;

/* Valores geometricos */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* Valores Geometricos y de caja combinados */
clip-path: padding-box circle(50px at 0 100px);

/* Valores globales */
clip-path: inherit;
clip-path: initial;
clip-path: unset;
Valor inicialnone
Applies toall elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
Heredableno
Percentagesrefer to reference box when specified, otherwise border-box
Mediavisual
Valor calculadoas specified, but with url values made absolute
Animation typeyes, as specified for basic-shape, otherwise no
Canonical orderel orden único no-ambigüo definido por la gramática formal

Syntax

Valores

url()
Represents a URL referencing a clip path element.
 
inset(), circle(), ellipse(), polygon()
A <basic-shape> function. Such a shape will make use of the specified <geometry-box> to size and position the basic shape. If no geometry box is specified, the border-box will be used as reference box.
<geometry-box>
If specified in combination with a <basic-shape>, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined by border-radius) as clipping path. The geometry box can be one of the following values:
fill-box
Uses the object bounding box as reference box.
stroke-box
Uses the stroke bounding box as reference box.
view-box
Uses the nearest SVG viewport as reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the reference box is set to the width and height values of the viewBox attribute.
margin-box
Uses the margin box as the reference box.
border-box
Uses the border box as the reference box.
padding-box
Uses the padding box as the reference box.
content-box
Uses the content box as the reference box.
none
There is no clipping path created.

Formal syntax

<clip-source> | [ <basic-shape> || <geometry-box> ] | none

where
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

where
<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box

where
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box

Examples

/* inline SVG  */
.target {
  clip-path: url(#c1);
}

/* external SVG */
.anothertarget {
  clip-path: url(resources.svg#c1);
}

/* circle */
.circleClass {
  clip-path: circle(15px at 20px 20px);
}

Live sample

HTML

<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
    alt="MDN logo">
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90"/>
      <rect x="0" y="110" width="90" height="90"/>
      <rect x="137" y="0" width="90" height="90"/>
      <rect x="0" y="0" width="90" height="90"/>
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#cross)" selected>cross</option>
  <option value="inset(20px round 20px)">inset</option>
</select>

CSS

#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}

Result

Specifications

Specification Status Comment
CSS Masking Module Level 1
La definición de 'clip-path' en esta especificación.
Candidate Recommendation Extends its application to HTML elements
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La definición de 'clip-path' en esta especificación.
Recommendation Initial definition (applies to SVG elements only)

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
clip-pathChrome Soporte completo 55
Soporte completo 55
Soporte completo 23
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Edge Soporte completo 12
Notas
Soporte completo 12
Notas
Notas Edge only supports clip paths defined by url().
Firefox Soporte completo 3.5IE Soporte completo 10
Notas
Soporte completo 10
Notas
Notas Internet Explorer only supports clip paths defined by url().
Opera Soporte completo 42
Soporte completo 42
Soporte completo 15
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Safari Soporte completo 9.1
Soporte completo 9.1
Soporte completo 6.1
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
WebView Android Soporte completo 55
Soporte completo 55
Soporte completo Si
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Chrome Android Soporte completo 55
Soporte completo 55
Soporte completo 25
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Android Soporte completo 4Opera Android Soporte completo 42
Soporte completo 42
Soporte completo 14
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Safari iOS Soporte completo 9.1
Soporte completo 9.1
Soporte completo 6.1
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Samsung Internet Android Soporte completo 6.0
On SVG elementsChrome Soporte completo 23Edge Soporte completo 12Firefox Soporte completo 52IE Soporte completo 10Opera Soporte completo 15Safari Soporte completo 6.1WebView Android Soporte completo 4.4Chrome Android Soporte completo 25Firefox Android Soporte completo 52Opera Android Soporte completo 14Safari iOS Soporte completo 6.1Samsung Internet Android Soporte completo 1.5
On HTML elements
Experimental
Chrome Soporte completo 23Edge Sin soporte NoFirefox Soporte completo 3.5IE Sin soporte NoOpera Soporte completo 15Safari Soporte completo 6.1WebView Android Soporte completo 4.4Chrome Android Soporte completo 25Firefox Android Soporte completo 4Opera Android Soporte completo 14Safari iOS Soporte completo 6.1Samsung Internet Android Soporte completo 1.5
<basic-shape>Chrome Soporte completo 23Edge Sin soporte NoFirefox Soporte completo 54
Soporte completo 54
Sin soporte 47 — 54
Deshabilitado
Deshabilitado From version 47 until version 54 (exclusive): this feature is behind the layout.css.clip-path-shapes.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 15Safari Soporte completo 6.1WebView Android Soporte completo 4.4Chrome Android Soporte completo 25Firefox Android Soporte completo 54
Soporte completo 54
Sin soporte 47 — 54
Deshabilitado
Deshabilitado From version 47 until version 54 (exclusive): this feature is behind the layout.css.clip-path-shapes.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 14Safari iOS Soporte completo 6.1Samsung Internet Android Soporte completo 1.5
path()Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 63
Deshabilitado
Soporte completo 63
Deshabilitado
Deshabilitado From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 63
Deshabilitado
Soporte completo 63
Deshabilitado
Deshabilitado From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
AnimationsChrome Soporte completo 55Edge Sin soporte NoFirefox Soporte completo 49IE Sin soporte NoOpera Soporte completo 42Safari Sin soporte NoWebView Android Soporte completo 55Chrome Android Soporte completo 55Firefox Android Soporte completo 49Opera Android Soporte completo 42Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 6.0
fill-box and stroke-boxChrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 51
Notas
Soporte completo 51
Notas
Notas This value was supported before Firefox 51, but as an alias to border-box.
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 51
Notas
Soporte completo 51
Notas
Notas This value was supported before Firefox 51, but as an alias to border-box.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

See also

Etiquetas y colaboradores del documento

Última actualización por: mdnwebdocs-bot,