¡Hola, hola! En un minuto te voy a enseñar a usar ClipPath, una nueva propiedad que te permite definir la parte visible de un elemento HTML.
Para ello, vamos a usar una imagen de esa película que acaba de salir y que sale un montón de gente dándose palos por todo el espacio.
CSS nos ofrece un montón de valores predefinidos y métodos para crear nuestras propias formas.
Vamos a enseñar un círculo con un radio de 33%.
Como veis, ahora solo muestra lo que le indicamos.
Por defecto, el radio empieza desde el centro, pero podemos indicarle los puntos X e Y para que tome como centro otra coordenada.
Podemos hacer exactamente lo mismo con la forma de la elipse, pasándole dos radios diferentes.
Vamos a cambiar el radio vertical para no verle la papada al calamar. ¡Genial!
Ahora, igual que antes, la elipse empieza en el centro por defecto, pero podríamos modificarlo para que parta desde otra posición.
Mi forma favorita y la más creativa es la del polígono, ya que te permite indicar los diferentes vértices para así crear un área.
Los vértices son puntos X e Y y se separan con coma.
El punto 00 sería el punto de arriba a la izquierda del elemento.
Así que si ponemos estos tres vértices... ¡Tachán! Hacemos un triángulo.
Y nada más, que sepas que en este caso el límite es tu imaginación.
Por ejemplo, hago así que ping, que pan, que pum y tan fácil como chasquear los dedos.
Un bocadillo de cómic.
El soporte está un poco como Hulk, un poco verdecillo, pero ya se puede ir probando en algunos navegadores.
¿Os animáis a hacer vuestros propios ejemplos? Pues dadle caña.
Si te ha gustado el vídeo dale like y compártelo con tus amigos.
¡Hasta el próximo!