Written questions often encountered with CSS to achieve a div border to add a triangle problem, grasp a point, reasonable use of Div's border, when the div has a wide height, the border is an obscure border, when the width of the div is 0 o'clock, the border is a small box, the remaining three edges transparent is the magic triangle.
Then is the study of CSS: Before and: After pseudo-elements, such problems are generally divided into two types, namely, solid and hollow problems.
In the DOM structure are:<Div id= "Demo"></Div >
1. Solid Triangle
This kind of problem, generally give the background color (mostly dark), there is no overall shape of the border, relatively easy to start. The idea is simple, the overall div background color, determine the length and width, relative positioning, and then use: after the pseudo-elements in the DIV after the addition of content (space), set the width of 0, to determine the width of the border, absolute positioning on the line.
#demo { width:100px; height:100px; Background-color: #333; position:relative; } #demo: after{ border:solid Transparent; Border-left-color: #333; border-width:10px; width:0; Content: ""; Position:absolute; left:100%; top:10%; }
2. Hollow Triangle
For the hollow Triangle, the design idea and the solid triangle is similar, can be regarded as two solid triangle, the outer triangle is set as the overall border color of the solid triangle, the inner layer of the small triangle is set to white solid triangle, the outer width is greater than the width of the inner layer, the visual is the Hollow triangle. The key is: Before and: after pseudo-elements corresponding to the outer triangle and the inner triangular, as well as the border size calculation. Notice the visual first: after pseudo-element style, then: before pseudo-element style, that is, when the two coincide, the after pseudo-element is first seen.
For the Hollow Triangle Design (border-width:2px), the code is as follows:
#demo { width:100px; height:100px; Background-color: #fff; position:relative; border:2px solid #000; /* Overall color border is black */}/* small triangle */#demo: after{ border:solid Transparent; Border-left-color: #fff; border-width:10px; Content: ""; Position:absolute; left:100%; top:20px; /*20px*/}/* Grand Triangle * * #demo: before{ border:solid Transparent; Border-left-color: #000; border-width:12px; /*10px+2px*/ content: ""; Position:absolute; left:100%; top:18px; /*20px-2px*/}
Note that in CSS3,: Before and: After pseudo-elements are represented as:: Before and:: After form, in order to be compatible with IE8, it is recommended to write a single colon.
Create a small triangle problem with CSS (written test frequently)