如何在 HTML 中添加垂直线

17 Mar 2025 | 4 分钟阅读

在本文中，我们将学习如何使用外部 CSS 和 HR 标签的 transform 属性，通过各种示例轻松地在 HTML 文档中添加垂直线。

以下是在 HTML 文档中添加垂直线的各种方法。

示例 1

<! DOCTYPE html> 
<html> 
  <head> 
<meta charset = "UTF-8" />
  <meta name = "viewport" content = "width=device-width,
   initial-scale = 1.0" />
    <title> 
       How to add vertical line using CSS 
    </title>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Bangers);	
h1 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 3vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
 
}
h2 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 2vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
}
body {
	background: linear-gradient(8deg, #23d5ab, #edcdd9, #d54c23, #989d9b);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.outer {
  width: 5px;
  height: 100%;
   font-weight: bold;
  margin: auto;
  position: relative;
  overflow: hidden;
}
.inner {
  position: absolute;
  width:100%;
  height: 40%;
  background: grey;
  top: 30%;
  box-shadow: 0px 0px 30px 20px grey;
}
</style>
<body>
<h1> Example </h1>
<h2> How to add Vertical Line using CSS </h2>
<div class = "outer">
  <div class = "inner"> </div>
</div>
</body>
</html>

说明

在上面的示例中，我们创建了一个使用 CSS 在 HTML 文档中添加垂直线的示例。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html> 
<html> 
  <head> 
    <title> 
<meta charset = "UTF-8" />
  <meta name = "viewport" content = "width=device-width,
   initial-scale = 1.0" />
How to add Vertical Line using HR tag transform property in CSS    </title>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Bangers);	
h1 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 3vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
 
}
h2 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 2vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
}
body {
	background: linear-gradient(8deg, #23d5ab, #edcdd9, #d54c23, #989d9b);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
  hr {
    transform: rotate(90deg);
	border: 1px solid red;
	position: relative;
        top: 120px;
        border: none;
        height: 12px;
        background: black;
        margin-bottom: 50px;
		width: 200px;
  }
</style>
<body>
<h1> Example </h1>
<h2> How to add Vertical Line using HR tag transform property in CSS </h2>
<hr>
</body>
</html>

说明

在上面的示例中，我们创建了一个使用 HR 标签的 transform 属性在 HTML 文档中添加垂直线的示例。

  hr {
    transform: rotate(90deg);
}

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html> 
<html> 
  <meta charset = "UTF-8" />
  <meta name = "viewport" content = "width=device-width,
   initial-scale = 1.0" />
<head> 
    <title> 
        How to add Vertical Zigzag Line using CSS </title>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Bangers);	
h1 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 3vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
}
h2 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 2vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
}
body {
	background: linear-gradient(8deg, #23d5ab, #edcdd9, #d54c23, #989d9b);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.zigzag {
  position: absolute;
  width: 50px;
  z-index: 1;
  height: 100%;
  left: calc(50% - 75px);
}
.zigzag:before,
.zigzag:after {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
}
.zigzag:before {
  width: 46px;
  left: 110%;
  background: linear-gradient(45deg, #fb1d78 25px, transparent 0) 0 25px, linear-gradient(135deg, #fb1d78 25px, transparent 0) 0 25px;
  background-position: top left;
  background-repeat: repeat-y;
  background-size: 50px 50px;
  height: 100%;
}
.zigzag:after {
  width: 50px;
  left: 100%;
  background: linear-gradient(45deg, #fff 25px, transparent 0) 0 25px, linear-gradient(135deg, #fff 25px, transparent 0) 0 25px;
  background-position: top left;
  background-repeat: repeat-y;
  background-size: 50px 50px;
  height: 100%;
}
</style>
<body>
<h1> Example </h1>
<h2> How to add Vertical Zigzag Line using CSS </h2>
<div class = "zigzag"> </div>
</body>
</html>

说明

在上面的示例中，我们创建了一个使用 CSS 在 HTML 文档中添加锯齿状垂直线的示例。

输出

以下是这个例子的输出。

下一主题如何使用 HTML 和 CSS 创建电子邮件通讯

如何在 HTML 中添加垂直线

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何在 HTML 中添加垂直线

示例 1

示例 2

示例 3

相关帖子

如何嵌入 HTML 音频文件

HTML dt 标签

HTML 字体颜色

HTML Localhost Index

如何登录 jiofi.local.html

HTML 美化器

HTML input type="number"

如何在 HTML 中换行

如何制作 HTML 表格边框

HTML 图片按钮

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器