使用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>
感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!