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

10668 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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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