Formas básicas
Formas básicas
Podemos utilizar ciertas funciones que crean formas básicas como círculos, rectángulos, polígonos, etc., las cuales nos pueden resultar útiles como recortes (clip-path) o colocaciones con la propiedad shape-outside. Las formas básicas que tenemos son:
inset
La función inset crea un cuadrado o rectángulo donde cada parámetro de entrada que tiene esta función será la distancia desde su punto concreto. Si al final se le añade la palabra clave round estamos diciendo que se establezca un border-radius en cada esquina de los pixeles que le indiquemos.
inset(top right bottom left [round valor])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formas básicas con CSS</title>
<link rel="stylesheet" href="1.Formas.css">
</head>
<body>
<main>
<div class="cuadrado"></div>
<div class="cuadrado2"></div>
<div class="rectangulo"></div>
<div class="rectangulo2"></div>
<div class="circulo"></div>
<div class="circulo2"></div>
<div class="ellipse"></div>
<div class="polygon"></div>
<div class="path"></div>
</main>
</body>
</html>circle
Para el caso de la función circle, nos permite crear círculos, o semicirculos. Su sintaxis es circle(size at X Y), donde crearía un circulo con un tamaño (size) con el centro en x, y.
.circulo{
background: red;
width: 200px;
height: 200px;
/* tamaño punto central en x y punto central en y */
clip-path: circle(50% at 50% 50%);
}
.circulo2{
background: red;
width: 200px;
height: 200px;
clip-path: circle(50% at 50% 0);
}ellipse
En este caso, la función ellipse funciona exactamente igual que el círculo pero teniendo en cuenta el ancho (sX) y el alto (sY). Su sintaxis es ellipse(sX sY at x y)
.ellipse{
background: red;
width: 200px;
height: 200px;
/* tamañox tamañoy en x y */
clip-path: ellipse(50% 25% at 50% 0);
}polygon
La función polygon es una de las formas básicas más potentes ya que nos permite crearla a partir de las coordenadas que le demo. Su sintaxis es polygon(x y, x y, ...), crean un polígono siguiendo las coordenadas indicadas.
.polygon{
background: red;
width: 200px;
height: 200px;
/* tres puntos/coordenadas separadas por comas */
clip-path: polygon(0 0, 100% 0, 50% 100%);
}path
Si queremos algo más flexible y potente tenemos la función path donde podemos crear un trayecto SVG haciendo formas más complejas. La sintaxis es path(coordenadas), Crea una forma basada en un trayecto SGV
.path {
width: 256px;
height: 256px;
background: url("https://upload.wikimedia.org/wikipedia/commons/0/05/Mario_Series_Logo.svg") center / cover;
clip-path: path("m4,87l93,0l29,-84l29,84l93,0l-76,52l29,84l-76,-52l-76,52l29,-84l-76,-52z");
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formas CSS</title>
<link rel="stylesheet" href="2.formas.css">
</head>
<body>
<h1>Demo de <code>clip-path</code></h1>
<main>
<div class="card">
<h3>Original</h3>
<img class="clipped-box" src="https://picsum.photos/id/1025/200/200" alt="Perro original">
</div>
<div class="card">
<h3><code>inset()</code></h3>
<img class="clipped-box" id="clip-inset" src="https://picsum.photos/id/1025/200/200" alt="Perro con inset">
</div>
<div class="card">
<h3><code>circle()</code></h3>
<img class="clipped-box" id="clip-circle" src="https://picsum.photos/id/1025/200/200"
alt="Perro con circle">
</div>
<div class="card">
<h3><code>ellipse()</code></h3>
<img class="clipped-box" id="clip-ellipse" src="https://picsum.photos/id/1025/200/200"
alt="Perro con ellipse">
</div>
<div class="card">
<h3><code>polygon()</code></h3>
<img class="clipped-box" id="clip-polygon" src="https://picsum.photos/id/1025/200/200"
alt="Perro con polygon">
</div>
<div class="card">
<h3><code>path()</code></h3>
<img class="clipped-box" id="clip-path" src="https://picsum.photos/id/1025/200/200" alt="Perro con path">
</div>
</main>
</body>
</html>