soy Kseso y esto EsCSS

Triángulos en la web. 6 técnicas diferentes para lograrlos.

6 formas diferentes de lograr figuras triangulares en la web con Css y html

Triángulos en la web. 6 técnicas diferentes para lograrlos.

·Por Kseso ✎ 4

Seguro que has visto triángulos en todas partes: en la información sobre herramientas , menús desplegables e incluso en las animaciones de carga . Nos guste o no, estos pequeños elementos son muy importantes cuando se trata de marcar relaciones entre los elementos de la interfaz.
Hay algunas maneras diferentes de construir un triángulo para el diseño de tu web y en este artículo veremos diferentes técnicas de cómo se puede hacer eso. Con sus ventajas e inconvenientes

Imagen codificada

Se puede utilizar una imagen, además de enlazando el archivo diréctamente, codificándola en base64 y así tener menos peticiones HTTP.

Pros

  1. Se puede diseñar como desee el triángulo usando sombras, degradados, trazos... y luego simplemente codificarla.

Contras

  1. Se necesitará una herramienta de edición de imágenes como Photoshop / Gimp para editarla.
  2. Para las grandes imágenes, la cadena resultante puede ser bastante grande.
  3. Los navegadores más antiguos, como IE6/IE7 no son compatibles con este tipo de codificación.

De utilidad

  1. http://image2base64.wemakesites.net
  2. http://webcodertools.com/imagetobase64converter

Bordes Css

Esta es también una técnica muy común usada en tooltips y desplegables. Junto con la anterior, esta es una de mis métodos favoritos para crear útiles triángulos pequeños.

Pros

  1. Fácil de actualizar color y tamaño mediante el ajuste de algunos valores de CSS.
  2. Esta es una solución cross browser.

Contras

  1. Esta técnica consiste en utilizar los bordes, por lo que no se pueden añadir sombras, degradados y otras maravillas CSS3.
  2. Tenga en cuenta que IE6 no es compatible con bordes transparentes - en caso de que aún te preocupes por este tema.
  3. Si utilizas Firefox, tenga en cuenta que el valor CSS "transparente" pueden ser no tan transparente, especialmente en los bordes diagonales. Ver explicación y solucción.

De utilidad

  1. Hay muchos artículos al respecto. Y muchas figuras Css hechas con triángulos: Una al azar, otra más
  2. Generador de triángulos.

Entidades HTML

Esta técnica consiste en generar los triángulos con los caracteres unicode:
► U+25BA | ▼ U+25BC | ◀ U+25C0 | ▲ U+25B2

Pros

    Es una técnica totalmente cross browser.
  • Se puede agregar sombras con la propiedad CSS3 text-shadow y otras más como cambiar el color con Css y su tamaño...

Contras

  1. Al ser un elemento de texto las propiedades Css que admite están limitadas a las propias del texto.
  2. Es casi imposible alcanzar la perfección al píxel en todos los navegadores.

De utilidad

  1. Páginas con estos carácteres hay muchas: Una, dos
  2. Si las tienes que usar vía Css en la propiedad content este artículo te vendrá bien.
  3. No olvides otro recurso: archivos tipográficos de Iconos o Pictogramas.

Cuadrado girado con Css

Básicamente consiste en tener dos elementos. Uno de ellos puede ser un pseudoelemento (::before o ::after) y hacer lo siguiente:

  1. Crear una caja de por ejemplo 100x100 px. Éta contendrá al segundo elemento.
  2. Girar el bloque contenido 45 grados para obtener un rombo.
  3. Posicionar éste elemento en la parte superior del primero de tal manera que sobresalga la mitad.
  4. Declarar al primer elemento overflow: hidden para recortar el sobrante del segundo.

Pros

  1. Da mucho juego, puedes aplicar cualquier propiedad que admiten las cajas.

Contras

  1. Problemas con los navegadores que no admiten las propiedades del grupo transform y si utilizas un pseudoelemento igual.
  2. No puede utilizarse vía fondo o background.
  3. Si lo haces con otro elemento que no sean los pseudoelementos problemas de semántica: estás añadiendo etiquetas vacías para un mero adorno.

Ejemplo triángulo con transform Css

Html5 canvas

Pon lo siguiente en un archivo html:

<canvas id="triangle" height="100" width="100">Triangle</canvas>

Y así es como se construye un triángulo con javascript:

var canvas = document.getElementById('triangle'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(0, 0); context.lineTo(100, 0); context.lineTo(50, 100); context.closePath(); context.fillStyle = "rgb(78, 193, 243)"; context.fill();

Ejemplo triángulo Canvas

Triangle

SVG (Scalable Vector Graphics)

Así es como se puede definir una línea triángulo SVG en el marcado:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle"> &l;tpolygon points="0,0 100,0 50,100"/> </svg>

A continuación, sólo tiene que añadir algunos estilos:

.svg-triangle{ margin: 0 auto; width: 100px; height: 100px; } .svg-triangle polygon { fill:#98d02e; stroke:#65b81d; stroke-width:2; }

Ejemplo triángulo SVG

De utilidad

La recomendación del Consorcio: SVG styling properties

Una observación final

Debo admitir que no he jugado demasiado con los dos últimos se describe en este artículo: canvas y SVG . Esto es algo que debe mejorar en el futuro, ya que son muy poderosos. De todas formas, la verdad es que fueron hechos para cosas más grandes que sólo triviales triángulos :).
Déjanos saber lo que piensas acerca de estas formas de construir triángulos, ¿cuál es el método que se utilizas con más frecuencia?

Créditos y autoría

Artículo original de Catalin Rosu publicado en red-team-design

avatar del Editor del blog
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso