Home >Web Front-end >CSS Tutorial >How to draw horizontal and vertical lines using css

How to draw horizontal and vertical lines using css

WBOY
WBOYOriginal
2021-12-06 18:29:416432browse

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.

How to draw horizontal and vertical lines using css

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:

How to draw horizontal and vertical lines using css

(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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn