CSS triangle, css triangle

CSS triangle, css triangle

Set the border attribute of the div!

SetHeightAndWidth attributeSet0px, returns the border Value of the 4-sideSetSame Width, You can see the effect by adjusting the border color class.

<style>    div{height: 0px;width: 0px;        border-top: 20px solid red;        border-left: 20px solid blue;        border-right: 20px solid gray;        border-bottom: 20px solid pink;    }    </style>
You can get a square composed of four triangles. For example:

Next, you only need to remove the color of the other three sides to get the triangle.Border-color is transparentIn this case, you can get the triangle.
div{height: 0px;width: 0px;        border-top: 20px solid red;        border-left: 20px solid transparent;        border-right: 20px solid transparent;        border-bottom: 20px solid transparent;    }
The result is as follows:

In addition, transparent is the color value, equivalent to rgba (0, 0, 0), transparency is 0. However, it is not supported in IE6 and will be displayed by default as follows:

 
======================================================= =
 
div{        height: 0;        width: 0;        border-top: 100px solid red;        border-left: 100px solid transparent;    }
Occasionally, Baidu saw that such a setting would form two triangles, which were not previously expected. Therefore, it was recorded. Hey hey, the effect is as follows:

Add a pseudo-class method after testing.