Triángulos con CSS: LESS Mixin

10/Jun/2014 168

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. HenryUnfiP [#]

    gay dating site in switzerland
    gay dating gay
    serious gay dating

  2. Irrarllen [#]

    Prednisone

  3. warnings for cetirizine [#]

    zyrtec 10 mg tablet – https://allergyd.com

  4. side effects of cetirizine hcl [#]

    zyrtec 90 count price – http://allergyd.com

  5. walmart cetirizine [#]

    best price on zyrtec – https://allergyd.com

  6. prednison [#]

    prednisolone for dogs https://prednisolonesodiumphosphat.com/

  7. whatisprovigil [#]

    modafinil 100mg buy modafinil reddit

  8. modafinildrugtest [#]

    https://modafilmdmodafinil.com/ how to get modafinil

  9. bactrim dosage [#]

    co trimoxazole ds trimoxazole syrup uses

  10. ivermectin for humans over the counter in mexico [#]

    Global Low-down About this by-product
    https://ivermectinst.com stromectol
    https://ivermectstromect.com online pharmacy ivermectin
    https://ivermectinstrom.com ivermectin tablets
    https://stromectolivermect.com cost of ivermectin pill
    https://stromectolivermect.com stromectol

  11. stromectol cvs [#]

    ivermectin germany https://stromectolforte.com/# generisk stromectol online pharmacy no presc uk

  12. propecia 1mg tablets uk [#]

    us heart disease death rates 1950 http://finasteride5.com – where to buy propecia in canada

  13. pharmaceptica [#]

    erectile com https://pharmaceptica.com/

  14. ivermectin [#]

    ivermectin http://stromectolforte.com/# ivermectin tablets for sale walmart köp ivermectin nz

  15. what is accutane [#]

    accutane for acne buy isotretinoin

  16. stromectolforte.com [#]

    ivermektin koronavГ­rus http://stromectolforte.com/ tablety ivermektinu uk ivermectin tablets

  17. modafinilschedule [#]

    sunosi vs modafinil modalert reddit

  18. GustavoVet [#]

    essay helper
    write essays

CSSLab