CSS various azimuth triangles

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 ...