How to draw a triangle using css or html5? Two different ways to make triangles (code examples)-CSS Tutorial-php.cn

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

青灯夜游

Release： 2018-09-12 16:08:04

Original

10668 people have browsed it

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 the border attribute of css to realize the drawing of triangles

Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>border 属性--绘制三角形</title>
		<style>
			.demo{
				height:0;
			    width:0;
			    overflow: hidden;
			    font-size: 0;
			    line-height: 0;
			    border-color:#FF9600 transparent transparent transparent;
			    border-style:solid dashed dashed dashed;
			    border-width:20px;
			}
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

Copy after login

Rendering:

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

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;
}

Copy after login

Rendering:

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

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

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

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas-绘制三角形</title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500">
    浏览器不支持canvas
</canvas>
<script>
        window.onload=function () {

            var canvas=document.getElementById("canvas");//获取canvas对象

            var ctx=canvas.getContext("2d"); //创建二维的绘图上下文对象

            ctx.beginPath();
            ctx.linewidth=20;
            ctx.lineJoin="round"; //两条线交汇时的边角类型（miter 尖角默认  bevel斜角 round 圆角 ）
            ctx.moveTo(10,10);
            ctx.lineTo(110,10);
            ctx.lineTo(60,50);
            ctx.closePath(); //closePath() 关闭路径  闭合
            ctx.strokeStyle="blue";// strokeStyle 只能填充该路径的颜色
            ctx.fillStyle="red";// fillStyle 填充字体颜色、填充路径区域、图形区域
            ctx.fill();// fill() 填充字体
            ctx.stroke();
        }
    </script>
	</body>
</html>

Copy after login

Rendering:

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

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!