Use CSS to make triangles, understand

If it's hard to understand, just draw those borders on paper, it's easy to understand.

1. When the following code is set and assigned to the corresponding attributes of the DIV:

#sider2 {

width:100px;

height:100px;

border-top:30px solid #000;

border-right:30px solid #ff0000;

border-left:30px solid #00ff00;

border-bottom:30px solid #0000ff;

}

You will get a picture like this:

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

3, then when set its width to 0 o'clock, such as:

4, continue to set its height of 0;

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

6. This is the code needed to set up a basic triangle, and the effect looks intuitive.

7. If you want to achieve a right triangle, then finally need two border edge of the use, the browser will automatically do some "stretching transformation" after you can get a right triangle.

#triangle-topleft {

width:0;

height:0;

border-top:100px solid red;

border-right:100px solid Transparent;

}

Use CSS to make triangles, understand