Wie zeichne ich ein Dreieck mit CSS oder HTML5? Zwei verschiedene Möglichkeiten, Dreiecke zu erstellen (Codebeispiele)-CSS-Tutorial-php.cn

Wie zeichne ich ein Dreieck mit CSS oder HTML5? Zwei verschiedene Möglichkeiten, Dreiecke zu erstellen (Codebeispiele)

青灯夜游

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

Original

10668 Leute haben es durchsucht

Wenn wir eine Front-End-Entwicklung durchführen, benötigen wir manchmal einige kleine Grafiken, um den Seiteneffekt zu bereichern, z. B. die umgekehrten Dreiecksgrafiken der Dropdown-Liste. Wie wird ein solches Dreieck erstellt? In diesem Kapitel erfahren Sie, wie Sie ein Dreieck mit CSS oder HTML zeichnen. Zwei verschiedene Möglichkeiten, Dreiecke zu erstellen (Codebeispiele). Lassen Sie alle wissen, wie man Dreiecke mit reinem CSS-Code zeichnet oder wie man Dreiecke mit HTML5 zeichnet. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Mit dem Rahmenattribut von CSS können Sie Dreiecke zeichnen

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>

Nach dem Login kopieren

Rendering:

Wie zeichne ich ein Dreieck mit CSS oder HTML5? Zwei verschiedene Möglichkeiten, Dreiecke zu erstellen (Codebeispiele)

Verwenden Sie das Border-Attribut von CSS, um das Prinzip des Dreiecks zu realisieren: CSS-Boxmodell

Ein Boxmodell enthält: Rand + Rand + Polsterung + Inhalt, die Verbindung der oberen, unteren, Mit dieser Funktion können Sie kleine Dreiecke, kleine Trapeze usw. erhalten, indem Sie unterschiedliche Breiten oder Farben für die oberen, unteren, linken und rechten Ränder festlegen Dreieck.

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

Nach dem Login kopieren

Rendering:

Wie zeichne ich ein Dreieck mit CSS oder HTML5? Zwei verschiedene Möglichkeiten, Dreiecke zu erstellen (Codebeispiele)

Nachdem Sie sowohl Höhe als auch Breite auf 0 gesetzt haben, erhalten Sie:

Wie zeichne ich ein Dreieck mit CSS oder HTML5? Zwei verschiedene Möglichkeiten, Dreiecke zu erstellen (Codebeispiele)

Nachdem Sie alle anderen Farben entfernt und nur Orange belassen haben, erhalten Sie: Erhalten Sie ein Dreieck:

Wie zeichne ich ein Dreieck mit CSS oder HTML5? Zwei verschiedene Möglichkeiten, Dreiecke zu erstellen (Codebeispiele)

2. Mit HTML5s Canvas-Canvas können Sie das tun Zeichne ein Dreieck

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

Nach dem Login kopieren

Rendering:

Wie zeichne ich ein Dreieck mit CSS oder HTML5? Zwei verschiedene Möglichkeiten, Dreiecke zu erstellen (Codebeispiele)

Mit der HTML5-Leinwand können Sie die wichtigsten Punkte des Dreieckszeichnens erkennen:

Die drei Koordinaten des Dreiecks im Canvas: moveTo(10,10)- ---Die Koordinaten der oberen linken Ecke, ctx.lineTo(110,10)-----Die Koordinaten der oberen rechten Ecke, ctx.lineTo (60,50)----Die Koordinaten der unteren Ecke

Das obige ist der detaillierte Inhalt vonWie zeichne ich ein Dreieck mit CSS oder HTML5? Zwei verschiedene Möglichkeiten, Dreiecke zu erstellen (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!