How to make a straight line with sharp ends using css-Front-end Q&A-php.cn

How to make a straight line with sharp ends using css

青灯夜游

Release： 2023-01-11 09:19:25

Original

2779 people have browsed it

You can add "background:linear-gradient(rgba(255,255,255,0)0%,rgba(255,255,255,1)50%,rgba(255,255,255,0)100%);" style drawing to the element in css Both ends become straight and pointed.

How to make a straight line with sharp ends using css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In CSS, you can use the linear-gradient() function to make straight lines that become pointed at both ends.

Example:

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body {
			background-color: red;
		}

		.Line {
			width: 1px;
			height: 500px;
			background: linear-gradient(244deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
			margin: 20px;
		}
	</style>
</head>
<body>
	<div class="Line"></div>
</body>
</html>

Copy after login

How to make a straight line with sharp ends using css

Description:

The linear-gradient() function is used to create a representation of two or more A picture of a linear gradient of colors.

To create a linear gradient, you need to specify two colors. You can also achieve gradient effects in different directions (specified as an angle). If the direction is not specified, the gradient will default from top to bottom.

Syntax: background: linear-gradient(direction, color-stop1, color-stop2, ...);

Value	Description
direction	Specify the direction (or angle) of the gradient with an angle value.
color-stop1, color-stop2,...	is used to specify the starting and ending colors of the gradient.

Example:

//线性渐变指定一个角度:
#grad { background-image: linear-gradient(180deg, red, yellow);}

//线性渐变指定多个终止色:
#grad {background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);}

//透明度:
#grad {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));}

Copy after login

Recommended tutorial: "CSS Video Tutorial"

The above is the detailed content of How to make a straight line with sharp ends using css. For more information, please follow other related articles on the PHP Chinese website!