Use less to make a cue box with arrows

Here use less to make a hint box with arrows, compared with the CSS, more convenient, you can leave a lot of code, others do not rip, first look at the effect bar.

Here I implement a 4-direction prompt box, the following is the implementation of the Code:

Hint Box code:

<div class= "Top_prompt" > <div class= "top_triangle" > <span class= "line" ></span> <span class= "Back" ></span> </div> <div class= "Prompt_border" > On Cue box <br/> </div> </div> <div class= "left_prompt" > <div class= "Top_triangle" &            Gt <span class= "line" ></span> <span class= "Back" ></span> </div> <di V class= "Prompt_border" > Left cue box <br/> </div> </div> <div class= "Right_prompt" > <div class= "top_triangle" > <span class= "line" ></span> <span class= " Back "></span> </div> <div class=" Prompt_border "> Right prompt box <br/> < /div> </div> <div class= "bottom_prompt" > <div class= "Top_triangle" > <span Class= "LiNe "></span> <span class=" Back "></span> </div> <div class=" Prompt_bo Rder > Under prompt <br/> </div> </div>

Here will implement the code of the Hint box into a library.less file, the aspects of multiple local calls, other less files using the file, the direct use of the @import "library"; you can introduce the file.

Library.less File Code:

Border. Border (all, @b_w: 1px, @color: #cdcdcd, @style: solid) {border: @b_w @style @color;} Top box. Border (Top, @b_w: 1px, @color: #cdcdcd, @style: solid) {border-top: @b_w @style @color;} Right-hand border. Border, @b_w: 1px, @color: #cdcdcd, @style: solid) {border-right: @b_w @style @color;} Bottom border. Border (bottom, @b_w: 1px, @color: #cdcdcd, @style: solid) {border-bottom: the @b_w @style @color;} Left box. Border (Ieft, @b_w: 1px, @style: Solid, @color: #cdcdcd) {border-left: @b_w @style @color;} Position---relative positioning. Position (R) {position:relative;} Positioning, absolute positioning. Position (a) {position:absolute;} positioning, fixed positioning. Position (f) {position:fixed;} Fonts. Font (@size: 14px, @lh: 30px, @style: Normal, @family: "Microsoft Jas Black") {font: @style @size/@lh @family;} padding. Padd (All, @distance: 10px) {padding: @distance;}. Padd_top_left (@top_distance: 5px, @left_distance: 10px) {padding: @top_distance @left_distance;} Top padding. Padd (Top, @distance: 10px) {padding-top: @distance;} Right inner margin. Padd (R, @distance: 10px) {padding-right:10px;} Lower padding. Padd (Bottom, @distance: 10px) {padding-bottom: @distance;} Left margin. Padd (left,@distance:10px) {padding-left: @distance;} margins. Margin (all, @distance: 10px) {margin: @distance;}. Margin_top_left (@top_distance: 5px, @left_distance: 10px) {margin: @top_distance @left_distance;} Upper margin. Margin (top, @distance: 10px) {margin-top: @distance;} Margin (right, @distance: 10px) {margin-right: @distance;} Bottom margin. Margin (bottom, @distance: 10px) {margin-bottom: @distance;} Margin (left, @distance: 10px) {margin-left: @distance;}  /** upward triangle top: Matching mode @b_width: Triangle width @color: triangle color */.triangle (top, @b_width: 10px, @color: #cdcdcd) When (IsColor (@color)) {  Border-width: @b_width;  Border-color:transparent transparent @color transparent; Border-style:solid dashed dashed dashed;} /** rightwards Triangle right: matching pattern @b_width: Triangle width @color: triangle color */.triangle (starboard, @b_width: 10px, @color: #cdcdcd) When (IsColor (@color  ) {border-width: @b_width;  Border-color:transparent Transparent transparent @color; Border-style:dashed solid dashed dashed;} /** downward triangle bottom: matching pattern @b_width: Triangle width @color: triangular color */.triangle (bottom, @b_width: 10px, @color: #cdcdcd) wheN (IsColor (@color)) {border-width: @b_width;  Border-color: @color transparent transparent transparent; Border-style:dashed dashed solid dashed;} /** left triangle bottom: matching mode @b_width: Triangle width @color: triangle color */.triangle (@b_width: 10px, @color: #cdcdcd) When (IsColor (@color  ) {border-width: @b_width;  Border-color:transparent @color Transparent transparent; Border-style:dashed dashed dashed solid;}  This is the father-in-law of the above, no need to call manually, less will be automatically called. Triangle (@_, @b_width: 10px, @color: #cdcdcd) {width:0px;  height:0px; Display:inline-block;}  Fillet. Border-radius (@raiuds: 5px) {border-radius: @raiuds;  -webkit-border-radius: @raiuds; -moz-border-radius: @raiuds;} /* Arrow up top: Match mode @pb_w: Width @color: Hint box border color */.prompt (top, @pb_w: 200px, @color: #cdcdcd) {. top_triangle{top:-20px; left:10px;.  line{triangle (top,10px, @color);//upward triangular}.back{. Triangle (top,10px, #ffffff);//upward triangle top:1px;} }}/* Arrow Left: Match mode @pb_w: Width of the prompt box @color: Hint box border color */.prompt (left, @pb_w: 200px, @color: #cdcdcd) {. top_triangle{left:- 20px;top:10px;. line{. TriaNgle (left,10px, @color);//Left Triangle}.back{triangle (left,10px, #ffffff);//Left triangle left:1px;} }}/* arrow to the right of the prompt box: Match mode @pb_w: Width @color: Hint box border color */.prompt (right, @pb_w: 200px, @color: #cdcdcd) {. top_triangle{left : @pb_w +21;top:10px;.  line{triangle (right,10px, @color);//Right triangle}.back{. Triangle (right,10px, #ffffff);//Right triangle left:-1px;} }}/* Arrow Down Tip box bottom: Match mode @pb_w: Width @color: Hint box border color */.prompt (bottom, @pb_w: 200px, @color: #cdcdcd) {. top_triangle{ bottom:0px;left:10px;.  line{triangle (bottom,10px, @color);//downward triangular}.back{. Triangle (bottom,10px, #ffffff);//downward triangular top:-1px;} }}//the public style of the prompt box does not need to be called manually. Prompt (@_, @pb_w: 200px, @color: #cdcdcd) {. Position (R);//relative positioning. Margin (top,5px);//upper margin. Top_ Triangle{z-index:1;. Position (a);//absolute positioning. line{. Position (a);//absolute positioning}.back{. Position (a);//Absolute Positioning}}. Prompt_border{.position (R);// Relative positioning. Border (all,1px, @color);//Border. Padd_top_left ();//inner margin background: #ffffff; width: @pb_w;.  Border-radius ();//rounded corners. Font (); }}

@import "Lib/library";. top_prompt {  . prompt (top);}. left_prompt{  . Prompt (left);}. right_prompt{  . Prompt (right);}. bottom_prompt{  . Prompt (bottom);}

Use less to make a cue box with arrows