Propiedad CSS clip-path
La propiedad clip-path permite especificar una región de recorte que define qué parte del elemento debe mostrarse. Las partes fuera de esta región se ocultan. Esta propiedad acepta cuatro tipos de valores:
<clip-source><basic-shape><geometry-box>none
La propiedad obsoleta clip será reemplazada por la propiedad clip-path.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredable | No |
| Animable | Sí, si se especifica para <basic-shape>. |
| Versión | CSS Masking Module Level 1 |
| Sintaxis DOM | object.style.clipPath = "none"; |
Sintaxis
Sintaxis de la propiedad CSS clip-path
css
clip-path: <clip-source> | <basic-shape> | <geometry-box> | none | initial | inherit | unset;Ejemplo de la propiedad clip-path:
Ejemplo de la propiedad CSS clip-path con un valor basic-shape
html
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #eee;
}
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
grid-gap: 20px;
justify-content: center;
}
.container div {
background-image: url("https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-position: center;
background-size: cover;
color: #000;
font-size: 18px;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.example {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
</style>
</head>
<body>
<h1>Clip-path property example</h1>
<div class="container">
<div class="example">polygon</div>
</div>
</body>
</html>Resultado
Ejemplo de la propiedad clip-path con todos los valores:
Ejemplo de la propiedad CSS clip-path con valores globales y basic-shape
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #eee;
}
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
grid-gap: 20px;
justify-content: center;
}
.container > div {
background-image: url(https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg);
background-position: center;
background-size: cover;
color: #000;
font-size: 18px;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
clip-path: none;
}
.box2 {
clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
/* values are from-top, from-right, from-bottom, from-left, and optional round keyword for border-radius */
}
.box3 {
clip-path: circle(50% at 50% 50%);
}
.box4 {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.box5 {
clip-path: ellipse(90px 50px at 100px 100px);
}
.box6 {
clip-path: inherit;
}
.box7 {
clip-path: initial;
}
.box8 {
clip-path: unset;
}
</style>
</head>
<body>
<h2>Clip-path property example</h2>
<div class="container">
<div class="box1">none</div>
<div class="box2">inset</div>
<div class="box3">circle</div>
<div class="box4">polygon</div>
<div class="box5">ellipse</div>
<div class="box6">inherit</div>
<div class="box7">initial</div>
<div class="box8">unset</div>
</div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
<clip-source> | La <url> que hace referencia a un elemento SVG <clipPath>. |
<basic-shape> | Una función de forma básica como circle(), ellipse(), inset() o polygon(). Se puede combinar con un <geometry-box> usando una barra diagonal (/). |
<geometry-box> | Define la caja de referencia para la forma básica (por ejemplo, border-box, padding-box, content-box, margin-box). |
| none | No se crea ninguna ruta de recorte. |
Nota: initial, inherit y unset son valores globales de CSS y se pueden usar con cualquier propiedad.
Practice
¿Qué hace la propiedad CSS clip-path?