"Basics" draw triangles and related applications in CSS

Jianyan

This paper briefly describes the method of using CSS border to draw triangles on the page, including several typical triangles, and introduces several simple application scenarios. Using the border to draw the Triangle method is only one of many schemes, we choose the most suitable project according to the actual project.

1 Fundamentals

In CSS, we can draw triangles using the border-top, Border-left, Border-bottom, and Border-left four properties. The basic principles of implementation are described in the following demo code and its running results.

Core code:

.box{    width:50px;    height:50px;    border-top:50pxsolidred;    border-left:50pxsolidblue;    border-right:50pxsolidgreen;    border-bottom:50pxsolidyellow;}

Operation Result:

Demo Code

From the above code and running results are not difficult to figure out the way to draw a triangle, we just have to .box set the length and width of 0, we can get four isosceles triangle. The triangle border color you don't want to keep is set to transparent (that is: border-color : transparent ) to hide the triangles you don't want to keep. This completes the rendering of the triangle.

2 Drawing Triangles 2.1 equilateral triangle

Equilateral triangle (also known as the three-side shape), three-side equal triangle, its three internal angles are equal, are 60°, it is a acute triangle. Equilateral triangle is also the most stable structure.

2.1.1 Sharp angle upward:

.triangle-up{    width:0;    height:0;    border-bottom:100pxsolidred;    border-left:57.735pxsolidtransparent;    border-right:57.735pxsolidtransparent;}

Demo Code

2.1.2 Sharp angle downward:

.triangle-down{    width:0;    height:0;    border-top:100pxsolidred;    border-left:57.735pxsolidtransparent;    border-right:57.735pxsolidtransparent;}

Demo Code

2.1.3 Sharp angle to the left:

.triangle-left{    width:0;    height:0;    border-right:100pxsolidred;    border-top:57.735pxsolidtransparent;    border-bottom:57.735pxsolidtransparent;}

Demo Code

2.1.4 Sharp angle to the right:

.triangle-right{    width:0;    height:0;    border-left:100pxsolidred;    border-top:57.735pxsolidtransparent;    border-bottom:57.735pxsolidtransparent;}

Demo Code

2.2 Isosceles Right Triangle

Isosceles Right triangle is a special isosceles triangle, and its two corners are equal, both of which are 45°; its two waists are equal in length.

2.2.1 Left upper Right angle:

.triangle-top-left{    width:0;    height:0;    border-top:100pxsolidred;    border-right:100pxsolidtransparent;}

Demo Code

2.2.2 Right-angled:

.triangle-top-right{    width:0;    height:0;    border-top:100pxsolidred;    border-left:100pxsolidtransparent;}

Demo Code

2.2.3 left lower Right angle:

.triangle-bottom-left{    width:0;    height:0;    border-bottom:100pxsolidred;    border-right:100pxsolidtransparent;}

Demo Code

2.2.4 Right Angle:

.triangle-bottom-right{    width:0;    height:0;    border-bottom:100pxsolidred;    border-left:100pxsolidtransparent;}

Demo Code

3 Related Applications 3.1 popup box (popover) components

A pop-up box (popover) or cue box (tooltip) generally uses a triangle, which clearly and strengthens the pointing function. The PopOver and ToolTip components, similar to bootstrap, use the bounding triangle implementation.

Demo Code

The above demo just implements the top popup, and the other direction pop-up boxes refer to the implementation method described above.

3.2 Video Play button

The Video playback button (play button) can be implemented using a border triangle.

Demo Code

There are many application scenarios for triangles, such as the drop-down menus (dropdown menu), or the "Top" and "Step" buttons.

Border Implementation Triangle is just one of many scenarios, you can choose the Small icon scheme or choose the SVG scheme according to the actual project.

"Basics" draw triangles and related applications in CSS