Comment dessiner un triangle en CSS ou HTML5 ? Deux façons différentes de créer des triangles (exemples de code)-tutoriel CSS-php.cn

Comment dessiner un triangle en CSS ou HTML5 ? Deux façons différentes de créer des triangles (exemples de code)

青灯夜游

Libérer： 2018-09-12 16:08:04

original

10697 Les gens l'ont consulté

Lorsque nous effectuons du développement front-end, nous avons parfois besoin de petits graphiques pour enrichir l'effet de page, comme les graphiques en triangle inversé de la liste déroulante. Alors, comment est réalisé un tel triangle ? Ce chapitre vous présentera comment dessiner un triangle en utilisant CSS ou HTML ? Deux façons différentes de créer des triangles (exemples de code). Faites savoir à tout le monde comment dessiner des triangles en utilisant du code CSS pur ou comment dessiner des triangles en utilisant HTML5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. En utilisant l'attribut border de CSS, vous pouvez dessiner des 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>

Copier après la connexion

Rendu :

Comment dessiner un triangle en CSS ou HTML5 ? Deux façons différentes de créer des triangles (exemples de code)

Utilisez l'attribut border du CSS pour réaliser le principe du triangle : modèle de boîte CSS

Un modèle de boîte comprend : margin+border+padding+content, la jonction du haut, les bordures inférieures, gauche et droite sont présentées. Des lignes diagonales lisses. Grâce à cette fonctionnalité, vous pouvez obtenir de petits triangles, de petits trapèzes, etc. en définissant différentes largeurs ou couleurs des bordures supérieure, inférieure, gauche et droite. la forme du triangle.

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

Copier après la connexion

Rendu :

Comment dessiner un triangle en CSS ou HTML5 ? Deux façons différentes de créer des triangles (exemples de code)

Après avoir réglé la hauteur et la largeur à 0, vous obtenez :

Comment dessiner un triangle en CSS ou HTML5 ? Deux façons différentes de créer des triangles (exemples de code)

Supprimez toutes les autres couleurs, en ne laissant que Après être devenu orange, vous obtiendrez un triangle :

Comment dessiner un triangle en CSS ou HTML5 ? Deux façons différentes de créer des triangles (exemples de code)

2. En utilisant le canevas de HTML5 , vous pouvez dessiner des 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>

Copier après la connexion

Rendu :

Comment dessiner un triangle en CSS ou HTML5 ? Deux façons différentes de créer des triangles (exemples de code)

À l'aide du canevas HTML5, vous pouvez réaliser les points clés du dessin de triangles :

Les trois coordonnées du triangle dans le canevas : moveTo (10,10)----Coordonnées du coin supérieur gauche, ctx.lineTo(110,10)-----Coordonnées du coin supérieur droit, ctx .lineTo(60,50)----Coordonnées du coin inférieur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!