Puede crear fácilmente formas usando la propiedad clip-path en CSS. En realidad , la propiedad clip-path le permite recortar un elemento a una forma básica. La forma básica como círculo, elipse, el polígono se puede lograr usando el valor de la propiedad < basic-shape> de clip-path que se discutirá más adelante en este artículo.
El valor de la propiedad:
- <basic-shape>: incluye algunas formas como círculos, rectángulos, elipses, etc. que recortan la imagen dada.
Sintaxis:
clip-path: <basic-shape>
Nota: clip-path permite recortar la parte visible de elementos SVG, imágenes o cualquier elemento HTML.
Ejemplo 1: El siguiente ejemplo crea formas como círculos, polígonos.
- Polígono:
Sintaxis:
clip-path: polygon(pairs of X and Y coordinates)
- Circulo:
Sintaxis:
clip-path: circle(radius);
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h2{
color:green;
}
/* Shape Circle */
#circle {
height: 200px;
width: 200px;
color: white;
background-color: green;
clip-path: circle(50%);
}
/* Shape Polygon */
#polygon {
height: 200px;
width: 200px;
color: white;
text-align: justify;
background-color: red;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
}
</style>
</head>
<body>
<center>
<h2>GeeksforGeeks</h2>
<h3>Shapes using Clipping</h3>
<p id="circle" height="500" width="500" >Circle</p>
<p id="polygon" >Polygon</p>
</center>
</body>
</html>
Producción:
círculo y polígono
Ejemplo 2: el siguiente ejemplo crea una elipse y una forma insertada.
- Elipse:
Sintaxis:
clip-path: ellipse(radiusX radiusY at posX posY)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h1{
color: green;
}
#ellipse {
height: 200px;
width: 200px;
color: white;
background-color: red;
clip-path: ellipse(50% 65% at 70% 50%)
}
#inset {
height: 200px;
width: 200px;
color: white;
margin-left:70px;
background-color: green;
clip-path: inset(20% 25% 20% 10%);
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Shapes using Clipping</h3>
<p id="ellipse">Ellipse</p>
<p id="inset">Inset</p>
</center>
</body>
</html>
Producción:
elipse e inserción
Ejemplo 3: El siguiente ejemplo crea formas de círculo y heptágono
Sintaxis para Círculo:
clip-path: circle(radius, shifted center by X, shifted center by Y)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h2{
color: green;
}
/* Shape Circle */
#circle {
height: 200px;
width: 200px;
color: white;
background-color: green;
clip-path: circle(70px at 50px 35px );
}
/* Shape Heptagon */
#polygon {
height: 200px;
width: 200px;
color: white;
text-align: justify;
background-color: red;
clip-path: polygon(50% 0%,
90% 20%, 100% 60%,
75% 100%, 25% 100%,
0% 60%, 10% 20%)
}
</style>
</head>
<body>
<center>
<h2>Welcome to GeeksforGeeks</h2>
<h3>Shapes using Clipping</h3>
<p id="circle" height="500" width="500" >Circle</p>
<p id="polygon" >Heptagon</p>
</center>
</body>
</html>
Producción:
Ejemplo 4: El siguiente ejemplo crea elipse y formas insertadas.
Sintaxis para elipse:
clip-path: ellipse(x, y)
Sintaxis para inserción:
clipt-path: inset(top, right, bottom, left)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h2{
color: green;
}
#ellipse
{
height: 200px;
width: 200px;
color: white;
background-color: red;
clip-path: ellipse(50% 30% ) /*ellipse(x, y) */
}
/* inset(top, right, bottom, left ) */
#inset
{
height: 200px;
width: 200px;
color: white;
background-color: green;
clip-path: inset(1px 30px 10px 70px); /* inset(0 19% 4% 18%);*/
}
</style>
</head>
<body>
<center>
<h2>GeeksforGeeks</h2>
<h3>Shapes using Clipping</h3>
<p id="ellipse" >Ellipse</p>
<p id="inset" >Inset</p>
</center>
</body>
</html>
Producción:
elipse e inserción
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA