CSS能在页面画一条斜线吗

相关文章推荐

腼腆的蛋挞 · JavaScript 使用 splice ...· 8 月前 ·

大气的铁板烧 · Android技巧分享——让官方模拟器和ge ...· 1 年前 ·

含蓄的作业本 · 为什么AI算法工程师要求C++? - 知乎· 1 年前 ·

安静的火柴 · MySQL（12）---纪录一次left ...· 1 年前 ·

能，一种是使用css样式：先画一条横线或竖线，然后将这条线旋转一定角度得到斜线。代码如下：
<style>
#book{width:300px;height:20px;border-bottom:1px solid #000000;-webkit-transform: rotate(45deg);/*Safari 4+,Google Chrome 1+ */-moz-transform: rotate(45deg);/*Firefox 3.5+*/filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45);} </style><div id="book"></div>
另外一种需要使用canvas标签，通过js实现：先画一块画板，再通过两点定位直接在画板上画线。代码如下：
<canvas id="myline" style="width:500px;height:500px;">
</canvas>
<script>
var c=document.getElementById("myline");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
</script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<body>
<div align="right" id='aa' style="width:300px;height:200px;"></div>
<script>
function a(x,y,color)
{
	document.write("<img border='1' style='position: absolute; left: "+(x)+"; top: "+(y)+";' width=1 height=1>")
}
function line(x1,y1,x2,y2,color)
{
    var tmp
    if(x1>=x2)
    {
        tmp=x1;
        x1=x2;
        x2=tmp;
        tmp=y1;
        y1=y2;
        y2=tmp;
    }
    for(var i=x1;i<=x2;i++)
    {
        x = i;
        y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;
        a(x,y,color);
    }
}
line(aa.offsetLeft,aa.offsetTop,aa.offsetLeft+aa.offsetWidth,aa.offsetTop+aa.offsetHeight,'blue')
</script>
</BODY>
</HTML>

简单的这样就可以,再复杂的话纯CSS实现起来可能不行,得引用第三方的东西了

本回答被提问者采纳