Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to achieve triangle in css". The editor shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to achieve triangle in css" can help you solve the problem.

The principle of css triangulation: first determine which direction the bottom edge is, and set which direction has color value; then remove the opposite edge directly; then set the width of the left and right sides and the length of the bottom edge of the triangle, and its own width is the height of the triangle.

This article operating environment: windows7 system, HTML5&&CSS3 version, DELL G3 computer

The principle of realizing Triangle with Pure css

Familiarize yourself with the css box model before you implement it.

And then create a normal application.

Width: 100px; height: 100px; border-top: 10px solid # 000; border-right: 10px solid # ff0000; border-left: 10px solid # 00ff00; border-bottom: 10px solid # 00fft;}

At this point, you need to pay attention to the intersection of the four borders, which will be used later. Then remove the width and height of the content, in order to facilitate observation, set the four borders larger, the effect is as follows:

Width: 0; height: 0; border-top: 100px solid # 000; border-right: 100px solid # ff0000; border-left: 100px solid # 00ff00; border-bottom: 100px solid # 0000ff;}

Now do you think the triangle is a bit embryonic? there are all four directions. If you want to set the color of the other direction to transparent, try a downward triangle first.

Border-top {width: 0; height: 0; border-top: 100px solid # 000; border-right: 100px solid transparent; border-left: 100px solid transparent; border-bottom: 100px solid transparent;}

It seems that this method, of course, the bottom frame is not used at present, but also makes the total height higher, which can be removed directly. Is it possible to understand that where the bottom edge is left, the color of which side will be left?

Next, there is another problem, that is, the width and height of this triangle. If you look carefully, the width of this triangle is exactly the sum of the left and right borders, that is, 200px, and its height is of course the width of the upper border, that is, 100px. [recommended study: "css Video tutorial"]

And so on, if the design draft is for an upward triangle with a long 50px and a high 60px, it should be written as follows:

Border-top {width: 0; height: 0; border-top: 60px solid # 000; border-right: 25px solid transparent; border-left: 25px solid transparent;}

You can also implement a right triangle:

Border-top {width: 0; height: 0; border-top: 100px solid # 000; border-left: 100px solid transparent;}

There are other right triangles with various angles, and the width and height can be customized, such as making a right right triangle with a length of 50 and a height of 60:

Border-top {width: 0; height: 0; border-top: 60px solid # 000; border-right: 50px solid transparent;}

The bottom edge is the top, so border-top sets the color, its width is high, so the width is set to 60, and the length of the bottom edge needs to be stretched by the right border (because the left is a right angle, which means there is no other frame coincident with it), so set the right border, and the width is the length of the triangle, that is, 50.

This is the end of the content about "how to achieve the triangle of css". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.