CSS make small triangles (very useful OH)

The following is reproduced from: http://www.cnblogs.com/huangzhilong/p/5030659.htmlPre-knowledge

When we set a div with its width and height of 100px, and set its four border width to 100px, and set its color separately, we can see one of the following pictures

At this point, if you set the height of this div to 0, the rest will be the same.

Below the width is also set to 0, get the following picture

Formal explanation

When we set the code below and assign it to the div corresponding property

[CSS]View PlainCopy  

2. #sider2 {
4. width: 100px;
6. height: 100px;
8. border-top: 30px solid #000;
10. border-right: 30px solid #ff0000;
12. border-left: 30px solid #00ff00;
14. border-bottom: 30px solid #0000ff;
16. }

You'll get a picture like this.

Then when the Border-bottom is not set, that is, the default is 0 o'clock, you can get the following picture

Then when you set its width to 0 o'clock, such as

Continue to set its height to 0

Finally, if you set the border-left,border-right to transparent, you can see the following triangles.

Implement a right triangle, then the last need two border edge of the use, the browser will automatically do some "stretch transform" after you can get a right triangle.

[CSS]View PlainCopy 

1. #triangle-topleft {
2. width: 0;
3. height: 0;
4. border-top: 100px solid red;
5. border-right: 100px solid transparent;
6. }

PS: To draw a triangle must be a block element, after and before shoddy is the inline element, must be defined as Inline-block or block before drawing

Ps:input does not support pseudo-elements (: After,:before). : Before and: After pseudo-elements specify the contents of an element before and after the document tree content. As DOM elements, pseudo-elements are rendered within a container. Elements such as Input,img,iframe cannot contain other elements, so it is not possible to insert content through pseudo-elements.

CSS make small triangles (very useful OH)