很多站长朋友们都不太清楚html三角形号怎么写，今天小编就来给大家整理html三角形号怎么写，希望对各位有所帮助，具体内容如下：
本文目录一览： 1、 css3怎样在HTML网页写三角形 2、 如何用html做出用新号代替的三角形如图 3、 html5 三角形的线条怎么写 css3怎样在HTML网页写三角形css3写三角形（为了好区分姑且按方向区别）：
（1）上三角形：
border: 16px solid transparent;
border-bottom: 16px solid #f00;
width: 0;
height: 0;
（2）下三角形：
border: 16px solid transparent;
border-top: 16px solid #f00;
width: 0;
height: 0;
（3）右三角形：
border: 16px solid transparent;
border-left: 16px solid #f00;
width: 0;
height: 0;
（4）左三角形：
border: 16px solid transparent;
border-right: 16px solid #f00;
width: 0;
height: 0;
如何用html做出用新号代替的三角形如图用p标签把每行星号写出了，控制好星号之间的空格。然后再把p标签用定位（position）固定在合适的位置上。
html5 三角形的线条怎么写使用<canvas> 标签
但是<canvas>只是图形容器，您必须使用脚本来绘制图形
使用<CANVAS>绘制矩形
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#00ff00';
ctx.fillRect(0,0,90,100);
</script>
下面教大家画条直线，代码注释很详细不再多说。
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
//设置绘图环境
var cxt=canvas.getContext('2d');
//开启新路近
cxt.beginPath();
// 设置笔触的宽度
cxt.lineWidth=2;
//设置笔触的颜色
cxt.strokeStyle="#ff0000";
//设定笔触的位置
cxt.moveTo(20,20);
//设置移动的位置
cxt.lineTo(200,20);
//画线
cxt.stroke();//这个时候的线已经出来了
//关闭路径
cxt.closePath();
//凡事路径图形必须先开始路径,画完之后必须结束路径
</script>
下边代码是画三角形，分空心和实心两种实现。
<canvas id="canvas1" width="300" height="300" style="background-color: yellow;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas1");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.moveTo(100,50);
cxt.lineTo(50,200);
cxt.lineTo(150,200);
cxt.closePath();//填充或闭合 需要先闭合路径才能画
//空心三角形
cxt.strokeStyle="red";
cxt.stroke();
//实心三角形
cxt.beginPath();
cxt.moveTo(250,50);
cxt.lineTo(200,200);
cxt.lineTo(300,200);
cxt.closePath();
cxt.fill();
</script>
关于html三角形号怎么写的介绍到此就结束了，不知道本篇文章是否对您有帮助呢？如果你还想了解更多此类信息，记得收藏关注本站，我们会不定期更新哦。
查看更多关于html三角形号怎么写 html5三角形符号的详细内容...