Skip to content

Instantly share code, notes, and snippets.

@alejonext alejonext/tria
Last active Apr 7, 2018

Embed
What would you like to do?
Creación de triangulos por less. Esto ayuda a crear triángulos, al lado de una etiqueta.
#arrow {
.left ( @color : blue, @size: 20px, @position : center, @alt : 150px ){
content: "";
position: absolute;
right: 100%;
border-top: @size solid transparent;
border-bottom: @size solid transparent;
border-right: @size solid @color;
z-index : 200;
top: @position;
}
.left ( @color, @size, @position, @alt ) when ( @position = top )
{ top: 0; }
.left ( @color, @size, @position, @alt ) when ( @position = bottom )
{ bottom: 0; }
.left ( @color, @size, @position, @alt ) when ( @position = center ), ( isNumber( alt ) )
{ @H2 : (@size / 2) + ( ~`Math.sqrt( Math.pow( parseFloat( "@{size}" ), 2 ) * 2 )` );
top : unit( floor( ( @alt - @H2 ) / 2) , px ) ; }
.right( @color : blue, @size: 20px, @position : center, @alt : 150px ){
content: "";
position: absolute;
left: 100%;
border-top: @size solid transparent;
border-bottom: @size solid transparent;
border-left: @size solid @color;
z-index : 200;
top: @position;
}
.right ( @color, @size, @position, @alt ) when ( @position = top )
{ top: 0; }
.right ( @color, @size, @position, @alt ) when ( @position = bottom )
{ bottom: 0; }
.right ( @color, @size, @position, @alt ) when ( @position = center ), ( isNumber( alt ) )
{ @H2 : (@size / 2) + ( ~`Math.sqrt( Math.pow( parseFloat( "@{size}" ), 2 ) * 2 )` );
top : unit( floor( ( @alt - @H2 ) / 2) , px ) ; }
.top ( @color : blue, @size: 20px, @position: center, @alt : 150px ) {
content: "";
position: absolute;
bottom: 100% ;
border-bottom: @size solid @color;
border-left: @size solid transparent;
border-right: @size solid transparent;
z-index : 200;
left: @position;
}
.top ( @color, @size, @position, @alt ) when ( @position = left )
{ left: 0; }
.top ( @color, @size, @position, @alt ) when ( @position = right )
{ right: 0; }
.top ( @color, @size, @position, @alt ) when ( @position = center ), ( isNumber( alt ) )
{ @H2 : (@size / 2) + ( ~`Math.sqrt( Math.pow( parseFloat( "@{size}" ), 2 ) * 2 )` );
right : unit( floor( ( @alt - @H2 ) / 2) , px ) ; }
.bottom ( @color : blue, @size: 20px, @position: center, @alt : 150px ){
content: "";
position: absolute;
left: @size;
border-top: @size solid @color;
border-left: @size solid transparent;
border-right: @size solid transparent;
z-index : 200;
}
.bottom ( @color, @size, @position, @alt ) when ( @position = top )
{ left: 0 ; }
.bottom ( @color, @size, @position, @alt ) when ( @position = bottom )
{ right: 0; }
.bottom ( @color, @size, @position, @alt ) when ( @position = center ), ( isNumber( alt ) )
{ @H2 : (@size / 2) + ( ~`Math.sqrt( Math.pow( parseFloat( "@{size}" ), 2 ) * 2 )` );
left : unit( floor( ( @alt - @H2 ) / 2) , px ) ; }
}
// Use
#left {
width : 150px;
hiegth : 50px;
background-color : red;
&:after { #arrow > .top( blue, 20px, center, 50px ); }
}
@ghost

This comment has been minimized.

Copy link

commented Mar 11, 2013

I can't fork it, there is a typo in line 78, it should be:

height: 50px;

@alejonext

This comment has been minimized.

Copy link
Owner Author

commented Nov 15, 2014

Si te interesa... lo puedo pasar a SCSS

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.