Home > Article > Web Front-end > How to make a straight line with sharp ends using css
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.
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>
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));}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!