"Front siege Lion Road" hands-on teaching you to use CSS triangle (Baidu 15 front-end research and development of the written volume)

[Question and Answer question] Topic description Please use CSS to achieve the following figure style, related dimensions such as illustration, where the DOM structure is:
<div id= "Demo" ></div>

realize the idea

1, first think about a problem: When the border-width is relatively large, its four borders is how to divide. The answer is " equal area Division ", as follows:

(Four congruent trapezoid)

2, further consider, the div width and height are set to 0, that is, as long as the border, then it shows the result is this:

(Four congruent triangles)

3, so, we can set the left border black, top, right and lower settings do not display (transparent color), you can get such a triangular spicy:

4, the black triangle moved to a square box of the right side of the box, and move Down 20px, is the following effect spicy:

5, to this step, but also need to "cover off" the content of the black triangle, leaving only a black edge. So, back to step 3 and then do a little bit of the white triangle, stacked on top of the black triangle, the effect of the problem to be hot:

The implementation code is as follows:

* * Square big box * *
div#container{
	width:100px;
	height:100px;
	border: #000 2px solid;
	Background-color: #fff;
	position:relative;
	z-index:1;/* 1th Floor * * * *

Lower Black triangle * * *
div#div1{
	width:0;
	height:0;
	Border:transparent 13px solid;
	Border-left: #000 13px solid;
	Position:absolute;
	left:100%;
	top:20px;
	z-index:2;/* 2nd Floor * * *

Upper White triangle * * *
div#div2{
	width:0;
	height:0;
	Border:transparent 10px solid;
	Border-left:white 10px solid;
	Position:absolute;
	left:100%;
	top:23px;
	z-index:3;/* 3rd Floor * *

<div id= "Container" >
	<div id= "Div1" ></div>
	<div id= "Div2" ></div>
</div>

Code considerations:

1, positioning mechanism: The parent element with relative, child elements to use Absolute + left/top to position relative to the parent element.

2, stacking order: First enlarge the box, then put the black triangle, and finally put the white triangle, has been in the CSS annotation annotations. (seems to be the official use of pseudo-class to do, individuals think the cascade of ideas more clearly)

Final Summary:

The idea of using a border to do triangles is to look at the online puzzle to get up posture. Really is a rise posture, I would like to use a div to rotate the right angle of the past ...