Advertisement
matthillco

LESS CSS Triangle Mixin using Pseudo Elements

Oct 25th, 2012
430
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.31 KB | None | 0 0
  1. /*  CSS triangles: used under certain panels, avoids needing images
  2.     Pass the function the colour, the width and the height, in that order.
  3.     Also pass position, alignment and an offset if necessary.
  4.     + Position can be 'top','bottom' or a PX value.
  5.     + Alignment can be one of 'right', 'left', 0 (left), 100% (right)
  6.     + Offset should be a PX value
  7.  
  8.     Notes:
  9.     + 360deg transform: this smooths the triangles in webkit.
  10.     + Two bottom border declarations: The 'transparent' is for old IE,
  11.       the rgba value and inset keyword improve rendering in Firefox.
  12.    
  13.     Usage:
  14.     .triangle(colour,width,height,position,alignment,offset)
  15. */
  16.    
  17. .triangle (@colour:@blue20, @width:80px, @height:20px, @vert:bottom, @align:right, @offset:0) {
  18.     display:block;
  19.     width:0; height:0;
  20.     border-bottom:@height solid transparent;
  21.     border-bottom:@height inset rgba(255,255,255,0);
  22.     position:absolute;
  23.     .transform(rotate,'360deg');
  24. }
  25. .triangle (@colour:@blue20, @width:80px, @height:20px, @vert:-20px, @align:right, @offset:0) when (@vert = top),(@vert = 0) {
  26.     bottom:auto; top:0;
  27. }
  28. .triangle (@colour:@blue20, @width:80px, @height:20px, @vert:-20px, @align:right, @offset:0) when (@vert = bottom),(@vert = 100%) {
  29.     bottom:-@height; top:auto;
  30. }
  31. .triangle (@colour:@blue20, @width:80px, @height:20px, @vert:-20px, @align:right, @offset:0) when (@align = right),(@align = 100%)  {
  32.     left:auto; right:0;
  33.     border-left:none;
  34.     border-right:@width solid @colour;
  35.     margin-right:@offset;
  36.  
  37. }
  38. .triangle (@colour:@blue20, @width:80px, @height:20px, @vert:-20px, @align:right, @offset:0) when (@align = left),(@align = 0) {
  39.     left:0; right:auto;
  40.     border-right:none;
  41.     border-left:@width solid @colour;
  42.     margin-left:@offset;
  43. }
  44.  
  45. .triangle-dtop (@colour:@grey70, @width:80px, @height:20px, @vert:-20px, @align:left, @offset:20) {
  46.     display:block;
  47.     width:0; height:0;
  48.     border-bottom:@height solid @colour;
  49.     border-left:@width solid transparent;
  50.     border-left:@width inset rgba(255,255,255,0);
  51.     border-right:@width solid transparent;
  52.     border-right:@width inset rgba(255,255,255,0); 
  53.     position:absolute;
  54.     left:@offset; top:@vert;
  55.     .transform(rotate,'360deg');
  56. }
  57.  
  58.  
  59.  
  60. EXAMPLE USAGE:
  61.  
  62. .blognav {
  63.     position:relative;
  64.     float:left;
  65.     width:21%;
  66.     padding:2em 2%;
  67.     margin:-2em 0 0 -2%;
  68.     background:@grey70;
  69.     .deco {
  70.         .triangle(@grey70,80px,20px,bottom,left);
  71.     }
  72. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement