Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

¡Finalmente! Triángulos CSS sin trucos feos

Cualquiera que haya intentado hacer flechas de votación ascendente HTML, globos de texto u otros elementos puntiagudos, sabe que para crear un triángulo solo CSS debe usar algún tipo de pirateo. Las dos soluciones más populares son crear sus triángulos fuera de los bordes o usar caracteres unicode .
Tenemos que admitir que estos dos hacks CSS son bastante inteligentes, pero siguen siendo soluciones terribles y, como tales, hacen que nuestro código sea mucho más feo y menos flexible. Por ejemplo, no podemos tener un triángulo con una imagen de fondo, ya que los bordes y los caracteres solo pueden ser de un color.

Introduciendo Clip-path

Clip-path es una adición bastante nueva a la especificación CSS que nos permite mostrar solo una parte de un elemento y ocultar el resto. Así es como funciona:
Digamos que tenemos un divelemento rectangular ordinario Puede hacer clic en Ejecutar en el editor a continuación para ver el HTML representado.
CSSHTML
1
2
3
4 4
5 5
div {
ancho : 200 px ;
altura : 200 px ;
fondo : url ( https://goo.gl/BeSyyD ) ;
}
Editar
Correr
Para hacer un triángulo necesitaremos la polygon()función. Espera como argumento puntos 2D separados por comas que definirán la forma de nuestra máscara. Un triángulo = 3 puntos. Intente y cambie los valores para ver cómo se transforma la forma.
CSSHTML
1
2
3
4 4
5 5
6 6
7 7
8
div {
ancho : 200 px ;
altura : 200 px ;
fondo : url ( https://goo.gl/BeSyyD ) ;
/ * Los puntos son: centrado arriba, abajo a la izquierda, abajo a la derecha * /
clip-path: polígono ( 50 % 0 , 0 100 % , 100 % 100 % );
}
Editar
Correr
Todo lo que está dentro del camino que creamos se queda, todo lo que está afuera está oculto. De esta manera, podemos hacer no solo triángulos, sino todo tipo de formas asimétricas que se comportarán como bloques CSS normales.
El único inconveniente de esta técnica es que tenemos que calcular cuidadosamente las coordenadas de nuestros puntos para obtener un triángulo atractivo.
Aún así, es mucho mejor que usar bordes o ▲.

Soporte de navegador

Si abre la página de Caniuse para las rutas de clip, las cosas no se ven muy bien a primera vista, pero en realidad la propiedad funciona perfectamente sin prefijar en Chrome y con el -webkit-prefijo en Safari. Los usuarios de Firefox tienen que esperar hasta la versión 53. IE / Edge está detrás de la curva como de costumbre, pero podemos esperar soporte en algún momento en el futuro.

Otras lecturas

La clip-pathpropiedad tiene muchos otros trucos bajo la manga, incluida algo de magia SVG. Para obtener más información al respecto, consulte los enlaces a continuación.
  • Clip-path en MDN - aquí
  • Tutorial en profundidad para clip-path en Codrops - aquí
  • Clippy, un generador de ruta de clip - aquí

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas