This tutorial will demonstrate the simple process of incorporating a vertical line in an HTML document by utilizing External CSS and the transform property of the HR tag, supported by multiple illustrative examples.
Here are different techniques for inserting a vertical line in an HTML file.
Example 1:
Example
<! 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>
Explanation:
In the demonstration provided earlier, we illustrated how to insert a vertical line into an HTML file using CSS.
Output:
Following is the output of this example.
Example 2:
Example
<! 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>
Explanation:
In the demonstration provided earlier, an illustration was made to showcase the process of inserting a vertical line within an HTML file using the transform property of the HR tag.
Example
hr {
transform: rotate(90deg);
}
Output:
Following is the output of this example.
Example 3:
Example
<! 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>
Explanation:
In the example provided earlier, we have demonstrated the process of incorporating a vertical zigzag line into an HTML document using CSS.
Output:
Following is the output of this example.