We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS


A propriedade clip-path previne que uma porção de um elemento seja renderizada ao definir uma região de corte.

Initial valuenone
Aplica-se aall elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Percentagesrefer to reference box when specified, otherwise border-box
Computed valueas specified, but with url values made absolute
Animation typeyes, as specified for basic-shape, otherwise no
Canonical orderthe unique non-ambiguous order defined by the formal grammar


clip-path: <uri> | none | inherit


<uri> | none | inherit


.target { clip-path: url(#c1); }

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


Especificação Status Comentário
CSS Masking Module Level 1
The definition of 'clip-path' in that specification.
Candidata a Recomendação

Extende a aplicação do clip-path ao HTML Element

Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'clip-path' in that specification.
Recomendação Definição inicial (aplicado apenas para SVG Elements)

Compatibilidade dos Browsers

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support ? ? ? ? ?
HTML elements ? 3.5 (1.9.1) bug 450340 ? ? ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?
HTML elements ? 1.0 (1.9.1) ? ? ?

Veja Também

Etiquetas do documento e colaboradores

Colaboradores desta página: teoli, JoaoMosmann
Última atualização por: teoli,