技术经验分享：CSS画三角形(三种方法)

"

使用CSS画一个三角形，想必部分同学都有一个小疑问，css怎么做三角形，让我为大家介绍一下吧！

第一种方法 //代码效果参考：https://v.youku.com/v_show/id_XNjQwNjg2ODc2NA==.html

div {

Width＜/span>: 0;

Height＜/span>: 0;

border-style: solid;

border-Width＜/span>: 50px;

border-color: transparent transparent black transparent;

}

第二种方法 如果我不给div设置宽度和高度能不能做

我们把div转换成行内块元素即可

div {

display: inline-block;

border-style: solid;

border-Width＜/span>: 50px;

border-color: transparent transparent black transparent;

}

第三种方法 canvas

[span class=""hljs-name"">body

[span class=""hljs-name"">canvas id=""myCanvas"" Width＜/span>=""100"" Height＜/span>=""100""

[span class=""hljs-name"">script

const trigon =//代码效果参考：https://v.youku.com/v_show/id_XNjQwNjg3NDgyMA==.html

let canvas = document.getElementById('myCanvas');

let ctx = canvas.getContext('2d');

ctx.moveTo(50, 20);

ctx.lineTo(0, 90);

ctx.lineTo(100, 90);

//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做

ctx.closePath();

ctx.stroke(); //绘制路径。

}

trigon()

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！