La propiedad clip-path de CSS se usa para recortar la sección particular de la imagen de modo que se muestre parte de la imagen dentro de la sección y parte de la imagen fuera de la sección no se muestre.
Sintaxis:
clip-path: <clip-source> | <basic-shape> | <geometry-box> | none;
Valor de la propiedad: todas las propiedades se describen bien con el siguiente ejemplo.
<basic-shapes>: Incluye algunas formas como círculos, rectángulos, elipses, etc. que recortan la imagen dada.
Ejemplo 1: este ejemplo muestra el uso básico de la propiedad clip-path para insertar las formas específicas que recortan la imagen dada.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<style>
#img {
margin-bottom: 20px;
clip-path: circle(40%);
}
#img1 {
margin-bottom: 20px;
clip-path: ellipse(115px 55px at 50% 40%);
}
#img2 {
margin-bottom: 20px;
clip-path: polygon(50% 20%, 90% 80%, 10% 80%)
}
#img3 {
margin-bottom: 20px;
clip-path: inset(22% 12% 15px 35px)
}
div {
float: left;
}
</style>
</head>
<body>
<p>Without clipping</p>
<img height="200"
width="200"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<p>With clipping</p>
<div>
<img id="img"
height="200"
width="200"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<img id="img1"
height="200"
width="200"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<img id="img2"
height="200"
width="200"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<img id="img3"
height="200"
width="200"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</div>
</body>
</html>
Producción:
clip-path: none;: No incluye recorte. Este es el valor predeterminado.
Ejemplo 2: este ejemplo muestra el uso básico de la propiedad clip-path donde el valor se establece en ninguno.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<style>
#img1 {
margin-bottom: 20px;
clip-path: none
}
</style>
</head>
<body>
<div>
<p>Without clipping</p>
<img height="200"
width="200"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<p>With clipping</p>
<div>
<img id="img1"
height="200"
width="200"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</div>
</div>
</body>
</html>
Producción:
clip-path: clip-source;: en esto, la parte de recorte se toma de otro elemento HTML que contiene una imagen o un elemento. El ID del elemento se utiliza para hacer referencia al elemento.
Ejemplo 3: este ejemplo muestra el uso básico de la propiedad clip-path donde el valor de la propiedad se establece en una URL.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<style>
#img1 {
margin-bottom: 20px;
clip-path: url("#clip")
}
</style>
</head>
<body>
<p>Without clipping</p>
<img height="200"
width="200"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
<!-- Making a rectangle to clip
rectangle area -->
<svg height="0" width="0">
<clipPath id="clip">
<rect y="100" x="0" width="100" height="100" />
<rect x="100" y="0" width="100" height="100" />
</clipPath>
</svg>
<p>With clipping</p>
<img id="img1"
height="200"
width="200"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</body>
</html>
Producción:
Navegadores compatibles:
- Firefox 3.5
- Edge 12.0 (solo admite rutas de clip definidas por url())
- Internet Explorer 10.0 (solo admite rutas de clip definidas por url())
- Ópera 42.0
- Safari 9.1
- cromo 55.0