Heim > Artikel > Web-Frontend > Wie zeichne ich ein Dreieck mit CSS oder HTML5? Zwei verschiedene Möglichkeiten, Dreiecke zu erstellen (Codebeispiele)
Wie zeichne ich ein Dreieck mit CSS oder HTML5? Zwei verschiedene Möglichkeiten, Dreiecke zu erstellen (Codebeispiele)
- 青灯夜游Original
- 2018-09-12 16:08:0410678Durchsuche
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>Rendering:
 "153673408920672Wie 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;
}Rendering:
 "153673478138812Wie 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:
Nachdem Sie alle anderen Farben entfernt und nur Orange belassen haben, erhalten Sie: Erhalten Sie ein Dreieck:
 "153673506972770Wie 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>Rendering:
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!