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>

用border可以实现啊

例如

#test {

width: 0

height: 0

border-left: 50px solid transparent

border-right: 50px solid transparent

border-top: 100px solid red

}

就能得到一个向下的三角形了

---