Introduction box model on W3:
Here's the tutorial, but it's too simplistic, Http://www.w3.org/community/webed/wiki/CSS/Training/Box_model.
, the box model and background properties control which parts.
Here the regular specification directory: HTTP://WWW.W3.ORG/TR/CSS21/COVER.HTML#MINITOC, find 8 Box model open
Or the Chinese w3school http://www.w3school.com.cn/css/css_boxmodel.asp
The above map is similar, but lacks the boundary border how to draw the question. For example, test:
Here Http://www.w3school.com.cn/tiy/t.asp?f=csse_border-color also, but too small, focus can be defined in 4 colors.
<style type= "Text/css" > div.fourcolors { width:60px; Height:20px; border-width:22px; border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb (250,0,255) }</style>
You can see that the boundary is diagonal, each side is a trapezoid, the order should be TRBL (Top, right, Bottom, left).
A triangle is seen in the height of the inline change.
Inline changes width, 4 triangles appear.
The two changes the style so that the right bottom left 3 triangles do not appear, that is, transparent and the same background.
IE6 does not support transparent Ah, the right lower left 3 triangles will be black.
The workaround is to set the remaining three edges of the border-style to dashed to achieve a transparent effect.
The reasons are:
IE6 display transparent does not work, the default other three border is black.
Here's a neat relationship, the value of width or height (depending on what shape you want.) The left and right arrows are related to height values, and the up and down arrows are related to width values. In the Border-width value of 3 times times the dashed is not displayed, that is to say we take advantage of the IE6 this bug, the page is OK.
One sentence summary: IE6 does not support transparent, conditional support dashed.
After understanding the principle, we can use it flexibly, for example rotate 90 degrees, the arrow left or right, nothing but change the color value of the other side. Make trapezoid, change width and height value: Width is not equal to height.
Border-style:dashed randomly changes the width and height of the value, interested people can play with their own. But the IE6 support is not good, or the previous said: width or height of the value should be in the value of Border-width 3 times times to display. Even if the display, ie and non-ie effects are not exactly the same.
Online View: Http://runjs.cn/code/32zwhknk
The general code is similar to this:
/*face down Triangle, top of the Boder style, color, etc. need to display control*/Div.triangle-arrow-down{width:0px;Height:0px;Overflow:Hidden;/*here set overflow, font-size, Line-height*/font-size:0;/*because, although the width of the height is 0, but under the IE6 will have the default, reflected in the left and right direction*/Line-height:0;/*font size and line height, resulting in the box being stretched long rectangle*/Border-width:22px;Border-style:solid dashed dashed dashed;/*IE6 below does not support transparent*/Border-color:#ff0000 Transparent Transparent transparent; }
22
Triangles CSS Triangle Tips
22
Reference:
Http://www.w3.org/TR/CSS21/box.html
Http://crossjae.diandian.com/css/border01
Triangle of CSS Box model