Home > Article > Web Front-end > How to draw horizontal and vertical lines using css
How to draw horizontal and vertical lines using css
- WBOYOriginal
- 2021-12-06 18:29:416304browse
Drawing method: 1. Add the "width: horizontal line length value; height: horizontal line thickness value; background: horizontal line color" style to the element to draw the horizontal line; 2. Add "width: vertical line" to the element Line thickness value; height: vertical line length value; background: vertical line color" style to draw vertical lines.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to draw horizontal and vertical lines using css
In css, we can set the size and fill color of an empty div element To achieve the effect of drawing horizontal and vertical lines.
For example, we can set the length of the div to the length of the horizontal line, the width of the div to the thickness of the horizontal line, and then fill it with the background color.
The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1{
width:100px;
height:1px;
background-color:#000;
}
.div2{
width:1px;
height:100px;
background-color:#000;
}
</style>
</head>
<body>
<div class="div1"></div><br>
<div class="div2"></div>
</body>
</html>Output result:
（Learning video sharing : css video tutorial)
The above is the detailed content of How to draw horizontal and vertical lines using css. For more information, please follow other related articles on the PHP Chinese website!