How to draw a triangle using css or html5? Two different ways to make triangles (code examples)

When we are doing front-end development, sometimes we need some small graphics to enrich the page effect, such as the inverted triangle graphics of the drop-down list. So how is such a triangle made? This chapter will introduce to you how to draw a triangle using css or html? Two different ways to make triangles (code examples). Let everyone know how to draw triangles using pure CSS code, or how to draw triangles using HTML5. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Use theborder attribute of cssto realize the drawing of triangles

Code:

Rendering:

Use the border attribute of css to realize the principle of triangle: css box model

A box model includes: margin border padding content, and a smooth diagonal line appears at the junction of the upper, lower, left and right borders. Taking advantage of this feature, you can get small triangles, small trapezoids, etc. by setting different widths or colors of the upper, lower, left, and right borders. Adjust the width to adjust the shape of the triangle.

.demo { height:20px; width:20px; border-color:#FF9600 #3366ff #12ad2a #f0eb7a; border-style:solid; border-width:20px; }

Rendering:

After setting both height and width to 0, you get:

After removing all other colors and leaving only orange, you get a triangle :

2. Using html5’scanvas canvas, you can draw triangles

     
   浏览器不支持canvas    

Rendering:

Using the HTML5 canvas, you can realize the key points of triangle drawing:

The three coordinates of the triangle in the canvas: moveTo(10,10)---- Coordinates of the upper left corner, ctx.lineTo(110,10)-----coordinates of the upper right corner, ctx.lineTo(60,50)----coordinates of the lower corner

The above is the detailed content of How to draw a triangle using css or html5? Two different ways to make triangles (code examples). For more information, please follow other related articles on the PHP Chinese website!