很多站长朋友们都不太清楚html中实体三角形怎么写，今天小编就来给大家整理html中实体三角形怎么写，希望对各位有所帮助，具体内容如下：
本文目录一览： 1、 css3怎样在HTML网页写三角形 2、 html三角形怎么做 3、 怎样用html或css制作三角形 4、 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三角形怎么做虽然有答案了 ， 但也有必要让你知道下 这个可以用css写出来，而且 很简单 很方便
有CSS3属性
包括 IE9 以上 支持 需要 -ms- 和-webkit- 具体 看兼容文档吧
.div{
width: 0px;
height: 0px;
border-style: solid;
border-color: transparent transparent transparent red;
border-width: 20px;
transform:rotate(45deg);
}
怎样用html或css制作三角形只设置border三个方向的值，另一个方向就会汇聚成一个点，就出现三角形了，希望对你有帮助，望采纳！
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
下面是个示例：
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中实体三角形怎么写的简单介绍的详细内容...