Triángulos con CSS: LESS Mixin

10/jun/2014 2

Crear formas geométricas con puro CSS y 1 elemento HTML ha sido una tarea creada hace años ya y que tiene recopilaciones varias de métodos y usos. Personalmente para crear triángulos con CSS uso un generador genial que espero nunca lo bajen: CSS triangle generator.

A raíz de su constante uso, creé un mixin para LESS que me permite crear triángulos equilátero, isósceles y escaleno con sólo variar los valores de ancho/alto y dirección:

Uso

Llama el mixin en tu sentencia CSS y entrégale los valores que necesitas:

.triangle(direccion,ancho,alto,color);

Dirección: valores

  • top
  • bottom
  • left
  • right
  • topright
  • topleft
  • bottomright
  • bottomleft

Ejemplo: básico

@tamano: 50px;
@color: red;
.basico {
  .triangle(bottomright,@tamano,@tamano,@color);
}

Ejemplo: avanzado

@tamano: 50px;
@color: red;
.avanzado {
  width: @tamano*2;
  height: @tamano;
  line-height: @tamano;
  background-color: @color;
  position: relative;
  &:after {
    position: absolute;
    left: 0;
    top: -@tamano;
    .triangle(top,@tamano,@tamano,@color);
  }
  &:before {
    position: absolute;
    left: 0;
    top: @tamano;
    .triangle(topleft,@tamano*2,@tamano*2,@color);
  }
}

Ver en GitHub

*actualización: Gracias a Félix Ortega por traducir el mixin a SASS:

Comentarios

  1. CSS indispensable - Artysmedia [#]

    […] Triángulos con CSS: LESS Mixin […]

  2. selects con estilo | CSSLab | Laboratorio de ideas web [#]

    […] y la bendita flecha / triángulo que siempre será útil. Para hacer triángulos con CSS uso mi mixin en LESS ó un generador de triángulos […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab