Crear formas personalizadas en CSS se logra principalmente a través del uso de diversas propiedades CSS como `border-radius`, `clip-path`, `transform` y pseudo-elementos como `::before` y `::after`.
1. Círculo: Puedes hacer un círculo utilizando la propiedad `border-radius: 50%;`. Asegúrate de que el ancho y el alto del elemento sean iguales.
```css .circle { width: 100px; height: 100px; border-radius: 50%; background-color: red; } ```2. Elipse: Es similar a un círculo pero con diferentes valores de ancho y alto. ```css .ellipse { width: 200px; height: 100px; border-radius: 50%; background-color: red; } ```
3. Rectángulo: Este es básicamente el valor predeterminado para elementos de bloque, pero puedes especificarlo si deseas. ```css .rectangle { width: 200px; height: 100px; background-color: red; } ```
4. Cuadrado: Un rectángulo con igual ancho y alto se convierte en cuadrado. ```css .square { width: 100px; height: 100px; background-color: red; } ```
5. Triángulo: Los triángulos son un poco más complicados y requieren el uso de los pseudoelementos `::before` o `::after` y la propiedad `border`. ```css .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } ```
6. Polígonos personalizados: Para formas más complejas, puedes usar la propiedad CSS `clip-path` con valores de polígono. ```css .polygon { -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background-color: red; } ```
La propiedad `clip-path` define una región de recorte. Sólo se muestra la parte del elemento que quedó dentro de la región definida.Además, puedes utilizar herramientas en línea para generar formas CSS personalizadas, como Clippy por Bennett Feely (https://bennettfeely.com/clippy/), que permite crear formas con `clip-path` y copiar fácilmente el CSS resultante.
