Hoy os traigo una plataforma donde crear figuras o formas con CSS nunca había sido tan fácil utilizando clip-path. ¿Te gustaría crear un polígono con una forma determinada y añadir un fondo? Con esta herramienta online podrás hacerlo rápidamente.
¿Que puedo hacer con clip-path?
Con clip-path puedes crear figuras recortando un elemento. Por ejemplo, si tenemos un div en el que con una clase cargamos un fondo, utilizando clip-path podemos recortarlo formado una figura determinada.
Esta herramienta nos trae por efecto bastantes formas determinadas, desde círculos, cuadrados, rombos, pentágonos, flechas, estrellas… y muchas más figuras que podemos utilizar solamente copiando el código que nos ofrece.
También, con un poquito de imaginación, podemos animar estas figuras en nuestra web, dando dinamismo a la página que eso siempre gusta al usuario.
Una cosa a tener en cuenta para la animación de estas figuras, es que la forma A debe de tener el mismo número de nodos o puntos que la forma B, es decir, si la forma A es un cuadro formado por 4 puntos, la forma B debe de tener también 4 puntos. Imagina una animación de un cuadrado convirtiéndose en un rombo por ejemplo.
¿Como utilizar clip-path?
Para utilizar clip-path, solamente tienes que añadir una clase al elemento que quieres aplicar el recorte. Luego, aplica el valor de clip-path con la figura que deseas y añadela a CSS. Aquí te dejo un ejemplo que he realizado con diferentes figuras recortando una las imágenes.
See the Pen Formas con Clip-path by JVLDesign (@vazquezdesigner) on CodePen.
Código utilizado para crear la forma con clip-path
Te dejo el código CSS que he utilizado para crear cada una de las formas que aparecen en el ejemplo anterior. También puedes visitar mi perfil de jsfiddle si quieres modificar el código y ver como funciona. Ver ejemplo de clip-path.
CÓDIGO HTML
<div class="imgClip">
<img decoding="async" class="img1" src="https://www.metaskeletor.club/wp-content/uploads/2022/02/nft-skeleton.jpg" >
<img decoding="async" class="img2" src="https://www.metaskeletor.club/wp-content/uploads/2022/02/nft-skeleton.jpg" >
<img decoding="async" class="img3" src="https://www.metaskeletor.club/wp-content/uploads/2022/02/nft-skeleton.jpg" >
<img decoding="async" class="img4" src="https://www.metaskeletor.club/wp-content/uploads/2022/02/nft-skeleton.jpg" >
</div>
.imgClip img {
margin:2% 2%;
width:42%;
}
.imgClip .img1 {
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.imgClip .img2 {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.imgClip .img3 {
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
.imgClip .img4 {
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
Herramienta web donde crear diferentes formas y figuras con clip-path
Os dejo el enlace de una web en la que podéis utilizar el código CSS de diferentes figuras para crear el clip-path que deseéis. Podéis tomar una figura base y modificarla a vuestro antojo y la herramienta os generará el código que tenéis que utilizar.
Preguntas y respuestas
clip-path es una propiedad en CSS que permite recortar o recortar elementos en formas personalizadas. Se utiliza para definir una región de recorte para un elemento utilizando diferentes formas, como círculos, elipses, polígonos, etc. Con clip-path, se puede lograr efectos visuales interesantes y creativos al recortar y mostrar solo una parte específica de un elemento.
Algunos ejemplos de uso de clip-path incluyen: 1) Crear una forma circular para una imagen de perfil; 2) Recortar una imagen en forma de triángulo o cualquier polígono personalizado; 3) Crear efectos de recorte en texto para mostrar solo una parte de las letras; 4) Recortar elementos de diseño para lograr diseños no convencionales, como diseños de tarjetas recortadas.
La propiedad clip-path es compatible con la mayoría de los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge. Sin embargo, es posible que algunos navegadores más antiguos no admitan clip-path o solo admitan ciertas formas. En cuanto al rendimiento, se debe tener cuidado al utilizar formas complicadas o con muchos puntos en el clip-path, ya que puede afectar el rendimiento de la página. Es recomendable optimizar y simplificar las formas para mantener un rendimiento óptimo.
