JavaScript是目前最广泛使用的编程语言之一，十分适用于网站和应用程序的创建。在JavaScript中，三角图是一种常见的绘图形状，它可以在视觉上吸引用户的眼球。本文将介绍如何使用JavaScript创建三角图的方式，不同类型的三角形以及它们的用途。

三角图是类似于三角形的图形，在Web应用程序中有多种使用场景：广告位、弹出模态框的提示等。三角图包括不同类型，如等腰三角形、直角三角形和等边三角形，每种类型的三角形都有特定的用途。

下面我们将举个例子创建一个等腰三角形，我们需要一个HTML文档和一些CSS和JavaScript代码。HTML文档将含有一个定义三角形的容器div和一个嵌入JavaScript代码的script标签。CSS代码将定义容器div的样式，使其在屏幕上呈现出三角形的形状。JavaScript代码将计算和呈现等腰三角形的位置和大小。

<div id="triContainer"></div>
<script>
window.onload = function(){
var triContainer = document.getElementById("triContainer");
triContainer.style.width = "0";
triContainer.style.height = "0";
triContainer.style.borderLeft = "50px solid transparent";
triContainer.style.borderRight = "50px solid transparent";
triContainer.style.borderBottom = "100px solid #000000";
}
</script>

以上代码使用了四个CSS属性——width、height、border、和border-color。其中border属性用于定义三角形的三条边，使它成为一个等腰三角形。height和width将容器指定为不存在的范围，这样只有三角形部分才会出现在屏幕上。

等腰三角形是三角形的一个常见类型，在Web开发中经常用作模态框中的提示。如果我们希望以不同方式呈现三角形，例如如果您想呈现一个直角三角形，就可以使用类似于以下的代码：

<div id="triContainer"></div>
<script>
window.onload = function(){
var triContainer = document.getElementById("triContainer");
triContainer.style.width = "0";
triContainer.style.height = "0";
triContainer.style.borderTop = "50px solid #000000";
triContainer.style.borderRight = "50px solid transparent";
triContainer.style.borderBottom = "50px solid transparent";
}
</script>

这个等腰三角形会在网页的右上角出现，它的左边和下边是直角，是一个特定类型的三角形。

其他形状的三角形也十分常见。例如，你可能希望创建一个等边三角形，它的三条边都具有相同的长度:

<div id="triContainer"></div>
<script>
window.onload = function(){
var triContainer = document.getElementById("triContainer");
triContainer.style.width = "0";
triContainer.style.height = "0";
triContainer.style.borderLeft = "50px solid transparent";
triContainer.style.borderRight = "50px solid transparent";
triContainer.style.borderBottom = "87px solid #000000";
}
</script>

在这种情况下，我们已经将大多数边设置为“透明”，只有底部的边缘是实际上可见的。

JavaScript是创建三角形的有力工具，但它并不是唯一的选择。HTML和CSS也可以一起使用，以声明式的方式定义三角形。