使用css border可绘制固定角度斜线，通过设置透明边框和旋转实现，兼容性好但灵活性差；2. 使用canvas能精确控制斜线的角度、颜色和粗细，支持动态绘制与动画，适合复杂场景。根据需求选择：静态用CSS，动态用canvas。
在html中直接画斜线无法通过基础标签实现，必须借助CSS或Canvas等技术手段。以下是两种常用且实用的方法：使用CSS border技巧和使用html5 Canvas绘图。
1. 使用CSS border绘制斜线
利用CSS中边框的“三角形”特性，可以通过设置透明边框来生成一条可视的斜线。这种方法常用于绘制对角线，比如表格中的删除线或装饰性线条。
原理是将一个div的宽度和高度设为0，然后通过设置border属性形成对角线方向的三角形，再隐藏不需要的部分。
示例：绘制从左上到右下的斜线
HTML:
<div class=”slash-line”></div>
CSS:
.slash-line {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #000;
transform: rotate(45deg);
}
说明：先创建一个指向右侧的三角形，再通过rotate(45deg)旋转成对角线效果。可通过调整border大小控制斜线粗细和长度。
立即学习“前端免费学习笔记（深入）”；
优点：兼容性好，无需javaScript；缺点：只能模拟固定角度斜线，不够灵活。
2. 使用Canvas绘制斜线
Canvas提供完整的绘图能力，适合需要精确控制线条角度、颜色、粗细等场景。
示例：在Canvas中画一条斜线
HTML:
<canvas id=”myCanvas” width=”200″ height=”200″></canvas>
javascript (可写在script标签内):
const canvas = document.getElementById(‘myCanvas’);
const ctx = canvas.getContext(‘2d’);
ctx.beginPath();
ctx.moveTo(0, 0); // 起点：左上角
ctx.lineTo(200, 200); // 终点：右下角
ctx.strokeStyle = ‘#f00’; // 线条颜色
ctx.lineWidth = 2; // 线条粗细
ctx.stroke(); // 执行绘制
你可以修改moveTo和lineTo的坐标来调整斜线的方向和长度，支持任意角度。
优点：灵活强大，支持动态绘制和动画；缺点：需要JavaScript，语义化较弱。
选择建议
如果只是静态展示一条简单斜线，如价格删除线或小图标，推荐使用CSS方法，轻量且易维护。
如果需要绘制复杂图形、响应用户操作或做动画，Canvas更合适。
基本上就这些，根据实际需求选一种即可。