CSS border and frame construction is the same, look at the following generation of CSS code:
<div style= "Border-color:red blue black green;border-style:solid;border-width:40px;height:100px;width:100px;" ></div>
When we set the div width and height to 0, it looks like this:
<div style= "Border-color:red blue black green;border-style:solid;border-width:40px;height:0px;width:0px;" ></div>
As you can see, the four pointed triangles have appeared, with the following example of a red triangle:
First step: We'll try to remove the black border.
<div style= "Border-color:red blue black green;border-style:solid;border-width:40px; Border-bottom:none; height:0px;width:0px; " ></div>
The second step: as if the left and right border removed on OK, I tried, in fact, is not.
Visible, left and right borders can not be removed ... In fact, the red triangle occupies a large space is so big, so, we have no way to do in the size of the control. A different way of thinking, set the left and right border to transparent, you can.
<div style= "border-color:red transparent transparent transparent;border-style:solid;border-width:40px; Border-bottom:none; height:0px;width:0px; " ></div>
The merit has caused ... However, this is a positive triangle, if only isosceles triangle what to do? Try the left and right border widths ... Oh.
<div style= "border-color:red Transparent transparent transparent;border-style:solid;border-width:40px 20px 0 20px; Border-bottom:none; height:0px;width:0px; " ></div>
Other triangles, and so on OK ...