如何利用CSS、JavaScript、Html画出斜线或者曲线

无界猴

1年前更新

060234

在HTML、CSS和JavaScript中，你可以使用多种方法来画出曲线或斜线。以下是一些基本示例：

图片[1]_如何利用CSS、JavaScript、Html画出斜线或者曲线_知途无界

1. 使用CSS的border属性画斜线

你可以使用CSS的border属性来画出一个斜线。例如：


<!DOCTYPE html>  
<html>  
<head>  
<style>  
.diagonal-line {  
  width: 0;  
  height: 0;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-bottom: 100px solid black;  
}  
</style>  
</head>  
<body>  
  
<div class="diagonal-line"></div>  
  
</body>  
</html>
<!DOCTYPE html>  
<html>  
<head>  
<style>  
.diagonal-line {  
  width: 0;  
  height: 0;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-bottom: 100px solid black;  
}  
</style>  
</head>  
<body>  
  
<div class="diagonal-line"></div>  
  
</body>  
</html>
<!DOCTYPE html>  
<html>  
<head>  
<style>  
.diagonal-line {  
  width: 0;  
  height: 0;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-bottom: 100px solid black;  
}  
</style>  
</head>  
<body>  
  
<div class="diagonal-line"></div>  
  
</body>  
</html>

在这个例子中，我们创建了一个没有宽度和高度的div元素，然后给它添加了一个从左到右的斜线边框。

2. 使用CSS的linear-gradient属性画斜线

你还可以使用CSS的linear-gradient属性来画出一个斜线背景。例如：


<!DOCTYPE html>  
<html>  
<head>  
<style>  
.diagonal-line {  
  width: 200px;  
  height: 200px;  
  background: linear-gradient(to right bottom, black 50%, transparent 50%);  
}  
</style>  
</head>  
<body>  
  
<div class="diagonal-line"></div>  
  
</body>  
</html>
<!DOCTYPE html>  
<html>  
<head>  
<style>  
.diagonal-line {  
  width: 200px;  
  height: 200px;  
  background: linear-gradient(to right bottom, black 50%, transparent 50%);  
}  
</style>  
</head>  
<body>  
  
<div class="diagonal-line"></div>  
  
</body>  
</html>
<!DOCTYPE html>  
<html>  
<head>  
<style>  
.diagonal-line {  
  width: 200px;  
  height: 200px;  
  background: linear-gradient(to right bottom, black 50%, transparent 50%);  
}  
</style>  
</head>  
<body>  
  
<div class="diagonal-line"></div>  
  
</body>  
</html>

在这个例子中，我们创建了一个带有斜线背景的div元素。linear-gradient的to right bottom表示斜线的方向是从左上角到右下角，black 50%, transparent 50%表示斜线在50%的位置从黑色变为透明。

3. 使用SVG画曲线或斜线

SVG (Scalable Vector Graphics) 是一种基于XML的二维矢量图形语言，可以用来画出复杂的曲线和形状。例如：


<!DOCTYPE html>  
<html>  
<body>  
  
<svg width="100" height="100">  
  <line x1="0" y1="0" x2="100" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />  
</svg>  
  
</body>  
</html>
<!DOCTYPE html>  
<html>  
<body>  
  
<svg width="100" height="100">  
  <line x1="0" y1="0" x2="100" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />  
</svg>  
  
</body>  
</html>
<!DOCTYPE html>  
<html>  
<body>  
  
<svg width="100" height="100">  
  <line x1="0" y1="0" x2="100" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />  
</svg>  
  
</body>  
</html>

在这个例子中，我们使用<line>元素在SVG中画出了一条从(0,0)到(100,100)的斜线。你可以通过改变x1、y1、x2和y2的值来改变斜线的起点和终点。

对于曲线，你可以使用<path>元素和d属性来定义路径。例如：


<!DOCTYPE html>  
<html>  
<body>  
  
<svg width="100" height="100">  
  <path d="M10 80 Q 50 10 90 80" stroke="black" fill="transparent"/>  
</svg>  
  
</body>  
</html>
<!DOCTYPE html>  
<html>  
<body>  
  
<svg width="100" height="100">  
  <path d="M10 80 Q 50 10 90 80" stroke="black" fill="transparent"/>  
</svg>  
  
</body>  
</html>
<!DOCTYPE html>  
<html>  
<body>  
  
<svg width="100" height="100">  
  <path d="M10 80 Q 50 10 90 80" stroke="black" fill="transparent"/>  
</svg>  
  
</body>  
</html>

在这个例子中，我们使用<path>元素和d属性画出了一条二次贝塞尔曲线。M10 80是起点，Q 50 10 90 80定义了曲线的控制点和终点。

4. 使用Canvas画曲线或斜线

HTML5的<canvas>元素和JavaScript可以用来画出更复杂的图形，包括曲线和斜线。例如：


<!DOCTYPE html>  
<html>  
<body>  
  
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">  
Your browser does not support the HTML5 canvas tag.  
</canvas>  
  
<script>  
var c = document.getElementById("myCanvas");  
var ctx = c.getContext("2d");  
ctx.beginPath();  
ctx.moveTo(0, 0);  
ctx.lineTo(200, 200);  
ctx.stroke();  
</script>  
  
</body>  
</html>
<!DOCTYPE html>  
<html>  
<body>  
  
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">  
Your browser does not support the HTML5 canvas tag.  
</canvas>  
  
<script>  
var c = document.getElementById("myCanvas");  
var ctx = c.getContext("2d");  
ctx.beginPath();  
ctx.moveTo(0, 0);  
ctx.lineTo(200, 200);  
ctx.stroke();  
</script>  
  
</body>  
</html>
<!DOCTYPE html>  
<html>  
<body>  
  
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">  
Your browser does not support the HTML5 canvas tag.  
</canvas>  
  
<script>  
var c = document.getElementById("myCanvas");  
var ctx = c.getContext("2d");  
ctx.beginPath();  
ctx.moveTo(0, 0);  
ctx.lineTo(200, 200);  
ctx.stroke();  
</script>  
  
</body>  
</html>