"Less series" triangular mixins

. Triangle-el-simple (){content: "";Display:Block;width:0;Height:0;position:Absolute;}. Triangle (@size){Border:(@size/2) Solid transparent;}. Triangle-left (@size: 20px, @color: #000, @offset: 0){&:before{. Triangle-el-simple ();. Triangle (@size); Border-color:transparent @color Transparent transparent;Border-left-width:0; Right:100%;Top:@offset; }}.triangle-inner-left (@size: 20px, @color: #000, @offset: 0){&:before {. Triangle-el-simple ();. Triangle (@size); Border-color:transparent transparent transparent @color;Border-right-width:0; Left:0;Top:@offset; }}.triangle-right (@size: 20px, @color: #000, @offset: 0){&:before {. Triangle-el-simple ();. Triangle (@size); Border-color:transparent transparent transparent @color;Border-right-width:0; Left:100%;Top:@offset; }}.triangle-inner-right (@size: 20px, @color: #000, @offset: 0){&:before {. Triangle-el-simple ();. Triangle (@size); Border-color:transparent @color Transparent transparent;Border-left-width:0; Right:0;Top:@offset; }}.triangle-top (@size: 20px, @color: #000, @offset: 0){&:before {. Triangle-el-simple ();. Triangle (@size); Border-color:transparent transparent @color transparent;Border-top-width:0;Bottom:100%; Left:@offset; }}.triangle-inner-top (@size: 20px, @color: #000, @offset: 0){&:before {. Triangle-el-simple ();. Triangle (@size); Border-color:@color Transparent Transparent transparent;Border-bottom-width:0;Top:0; Left:@offset; }}.triangle-bottom (@size: 20px, @color: #000, @offset: 0){&:before {. Triangle-el-simple ();. Triangle (@size); Border-color:@color Transparent Transparent transparent;Border-bottom-width:0;Top:100%; Left:@offset; }}.triangle-inner-bottom (@size: 20px, @color: #000, @offset: 0){&:before {. Triangle-el-simple ();. Triangle (@size); Border-color:transparent transparent @color transparent;Border-top-width:0;Bottom:0; Left:@offset; }}.triangle-left-top (@size: 20px, @color: #000, @offset: 0){&:before {. Triangle-el-simple ();. Triangle (@size * 2); Border-top:@size Solid @color;Top:100%;Border-left:0 Solid Transparent; Left:@offset; }}.triangle-inner-left-top (@size: 20px, @color: #000, @offset: 0){&:before {. Triangle-el-simple ();. Triangle (@size * 2); Border-top:@size Solid @color;Border-left:0 Solid Transparent;Top:0; Left:@offset;Margin-left:@size * ( -1); }}.triangle-right-top (@size: 20px, @color: #000, @offset: 0){&:before {. Triangle-el-simple ();. Triangle (@size * 2); Border-top:@size Solid @color;Top:100%;Border-right:0 Solid Transparent; Left:@offset; }}.triangle-inner-right-top (@size: 20px, @color: #000, @offset: 0){&:before {. Triangle-el-simple ();. Triangle (@size * 2); Border-top:@size Solid @color;Top:0;Border-right:0 Solid Transparent; Left:@offset; }}.triangle-left-bottom (@size: 20px, @color: #000, @offset: 0){&:before {. Triangle-el-simple ();. Triangle (@size * 2); Border-bottom:@size Solid @color;Bottom:100%;Border-left:0 Solid Transparent; Left:@offset; }}.triangle-inner-left-bottom (@size: 20px, @color: #000, @offset: 0){&:before {. Triangle-el-simple ();. Triangle (@size * 2); Border-bottom:@size Solid @color;Bottom:0;Border-left:0 Solid Transparent; Left:@offset; }}.triangle-right-bottom (@size: 20px, @color: #000, @offset: 0){&:before {. Triangle-el-simple ();. Triangle (@size * 2); Border-bottom:@size Solid @color;Bottom:100%;Border-right:0 Solid Transparent; Left:@offset; }}.triangle-inner-right-bottom (@size: 20px, @color: #000, @offset: 0){&:before {. Triangle-el-simple ();. Triangle (@size * 2); Border-bottom:@size Solid @color;Bottom:0;Border-right:0 Solid Transparent; Left:@offset; }}/*Triangle Series Mixinsmixins the left in the name, right, top, bottom describes the direction parameter description of the angle of 90 degrees in the triangle: @size--the size of the triangle @color--the color of the triangle @offset-- The position of the triangle (if the mixins name is end with top or bottom, then this parameter adjusts the horizontal position. If the mixins name ends with left or right, then this parameter adjusts the vertical position)*/Body{background:#fff;}. Wrap{Display:Inline-block;background:#ff0;margin:20px;padding:10px;width:240px;Height:45px;Line-height:45px;Color:#fff;text-align:Center;position:relative;}. up{. Triangle-bottom (10px, #f36);}

<!DOCTYPE HTML><HTML><HeadLang= "en">    <MetaCharSet= "UTF-8">    <title></title>    <Linktype= "Text/css"rel= "stylesheet"href= "Test.css"></Head><Body><Divclass= "Wrap Up">Hello sass! Up</Div></Body></HTML>

"Less series" triangular mixins