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

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 Don Kseso Kseso

Comentarios: 4

  1. Alguien14/10/12

    No conocía estas técnicas, gracias por compartir el artículo

    ResponderEliminar
  2. Ya que el random me abrió este viejo artículo cuando entré, aprovecho la ocasión para proponer un séptimo método, con fondos CSS.

    [code]
    div {
    width: 100px; height: 85px;
    background-color: yellow;
    background-image: linear-gradient(to right bottom, transparent 49%, red 51%),
    linear-gradient(to left bottom, transparent 49%, red 51%);
    background-size: 50.1% 100%;
    background-position: 0 0, right top;
    background-repeat: no-repeat;
    }
    [/code]

    Cuando se publicó aún no tenían un buen soporte en los navegadores.

    ResponderEliminar
    Respuestas
    1. Gracias Furoya.

      Lo añadiré al final con el oportuno crédito ;-)

      Un saludo

      Eliminar
    2. No fue nada, y el crédito ni hace falta ¡seguro que el método no lo inventé yo! XD

      Ahora veo que preguntaste por el que más usamos, y en mi caso parece que es el del borde, seguido por el de fondos.
      Pero estoy suponiendo que los bordes van primero en el ranking porque funcionan desde hace más tiempo. Hasta permitían simular marcadores de lista con flechas.

      [code]
      li {
      list-style-type: none;
      font: normal 1em/0 serif;
      height: 0; width: 5em;
      margin-top: .2em;
      border-style: solid;
      border-width: .6em;
      padding-left: 1em;
      border-color: yellow yellow yellow red;
      }
      [/code]

      Sí, es impresentable; pero funciona. ¿Verdad?
      ;-)

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap