CSS画三角形(三种方法)
使用CSS画一个三角形,想必部分同学都有一个小疑问,css怎么做三角形,让我为大家介绍一下吧!
第一种方法
div {width: 0;height: 0;border-style: solid;border-width: 50px;border-color: transparent transparent black transparent;
}
第二种方法 如果我不给div设置宽度和高度能不能做
我们把div转换成行内块元素即可
div {display: inline-block;border-style: solid;border-width: 50px;border-color: transparent transparent black transparent;
}
第三种方法 canvas
<body><canvas id="myCanvas" width="100" height="100">1</canvas>
</body>
<script>const trigon = () => {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()
</script>
感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!