Use CSS to draw triangles

Many times we encounter scenarios where you need to apply a triangle element, such as an interactive tip for a drop-down menu:

or a decorative label next to a page:

In fact, there are a lot of solutions for adding triangles to a page, with CSS, SVG, Canvas, and even a paste with PS, but we must choose the best one when considering the solution. To be sure, when the functional requirements of the triangle are relatively simple and single, the picture is the first to be excluded from the scheme. The difficult maintenance of the image for the page debugging and modification has brought some difficulties, so when a problem can be solved with code, we must first consider it. Consider canvas again, although canvas is relatively easy to modify, but as with pictures, it's too much of a talent to face simpler elements, and canvas should do what's best for it. What about SVG? Looks good, the code is simple and easy to maintain, but we can look at the first picture above, the triangle is only an interactive hint of the role, can be said not to constitute the necessary elements of the page, if we add this triangle of SVG into the page html,svg will inevitably affect the page's DOM structure. One of the principles that we should follow when writing HTML is to minimize the redundancy of HTML. Adding non-constituent pages to HTML is a violation of this principle, so SVG is not the best choice in this case. Well, foreshadowing so much, in fact, is to express the CSS is the best solution to this problem ... Applying pseudo-elements and border attributes in CSS can be a very elegant way to add triangular elements to a page.

Let's look at the code first:

. Trianglel   {    width: 0px; height: 0px;     border-top: 60px solid Transparent;     border-bottom: 60px solid Transparent;     border-right: 70px solid #555;}

The result of this code is the triangle on the second image above.

To understand this code, first we need to look at the shape of the border.

This is a div with a 120pxx120px size and a border of 30px:

Now we'll change the left and right borders to red:

It is obvious that a single border is actually a trapezoid.

So when we reduce the edge length of the div to 0 o'clock, we have this effect:

Immediately after that, the color of the unwanted single-sided box is set to transparent(transparent) and a triangle appears.

What you need to illustrate here is that when you use border to draw a triangle, you only need to draw the side that renders it as a triangle and the sides that are adjacent to it .

Various acute triangle and right triangle can be drawn by adjusting the width of the three-side border. For the above code, with the right border as the bottom of the triangle, Border-right determines the height of the triangle, Border-top and border-bottom determine the size of the triangle two corners. Because the border width cannot be negative, this method cannot be used to draw obtuse triangle.

Finally, the pseudo-element .

The previous code was to apply the style of the triangle directly on a class, in order not to increase the redundancy of the HTML, you can apply a pseudo-element : Before or : after the triangle is added near an already existing element, then use negative margins or position to adjust the position of the triangle.

Finally, the final point is to emphasize that in some of the problems can be better solved by the code to avoid the moment of convenience and choose pictures. With the rapid development of modern browser technology, there are many scenes in which the code can replace the picture perfectly, such as gradient, translucent, fillet button, picture filter, Iconfont and so on. I think one of the principles of transduction is "fewer pictures"-whether it's to improve page loading speed and code maintainability, or save traffic. To carefully consider the picture on the page trade-offs, this is a qualified transduction Aberdeen should have the ability.

Use CSS to draw triangles