How to add lines besides a vertical text using SASS ?
Last Updated :
09 Mar, 2022
In this article, we will see how to add lines besides some vertical text using SASS.
Approach: The HTML code is used to depict the basic structure of the body. Here, we define a division element with a class of wrapper to contain subsequent division elements. Another division element with a class of vertical-text is defined and it is rotated by 90 degrees using the transform property in SASS. For the rest of the text, two other division elements are defined with classes item-top and item-bottom respectively to represent some other text apart from the vertical text and these division elements are wrapped within another division element with a class of items.
Coming to SASS, to add a line beside the vertical text, we use the border-bottom property since the rotated element’s bottom section is actually displayed as a vertical border. The margins and the paddings of the other division elements are adjusted accordingly since the transform operation takes the vertical text outside of the normal flow of the document.
Example 1: Here, the vertical text is a random date (in this case 27 Feb 2022) and there is a line beside it defined using the border-bottom property (as explained earlier).
style.scss
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
p {
font-size: 1.25rem;
}
.wrapper {
display: flex;
align-items: flex-start;
justify-content: flex-start;
max-width: 600px;
min-width: 600px;
margin: 6rem auto 0 auto;
}
.vertical-text {
display: flex;
transform: rotate(-90deg);
border-bottom: 2px solid black;
padding-left: 5.5rem;
p {
padding-bottom: 0.1rem;
}
}
.items {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin-left: -3.8rem;
margin-top: -3rem;
p {
padding-left: 1rem;
}
}
.item-top {
p {
padding-bottom: 1rem;
}
}
.item-bottom {
border-top: 2px solid black;
p {
padding-top: 1rem;
}
}
|
Output: The generated CSS output will be as shown below.
style.css
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
p {
font-size: 1.25rem;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
max-width: 600px;
min-width: 600px;
margin: 6rem auto 0 auto;
}
.vertical-text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
border-bottom: 2px solid black;
padding-left: 5.5rem;
}
.vertical-text p {
padding-bottom: 0.1rem;
}
.items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-left: -3.8rem;
margin-top: -3rem;
}
.items p {
padding-left: 1rem;
}
.item-top p {
padding-bottom: 1rem;
}
.item-bottom {
border-top: 2px solid black;
}
.item-bottom p {
padding-top: 1rem;
}
|
index.html
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
p {
font-size: 1.25rem;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
max-width: 600px;
min-width: 600px;
margin: 6rem auto 0 auto;
}
.vertical-text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
border-bottom: 2px solid black;
padding-left: 5.5rem;
}
.vertical-text p {
padding-bottom: 0.1rem;
}
.items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-left: -3.8rem;
margin-top: -3rem;
}
.items p {
padding-left: 1rem;
}
.item-top p {
padding-bottom: 1rem;
}
.item-bottom {
border-top: 2px solid black;
}
.item-bottom p {
padding-top: 1rem;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="wrapper">
<div class="vertical-text">
<p>27 Feb 2022</p>
</div>
<div class="items">
<div class="item item-top">
<p>GeeksforGeeks</p>
</div>
<div class="item item-bottom">
<p>GeeksforGeeks is a computer
science portal for geeks.</p>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: This example is quite similar to the previous example but the only difference is that there is only one item division element apart from the vertically rotated text. Moreover, the vertical text is rotated the other way around by 90 degrees instead of negative 90 degrees.
style.scss
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
p {
font-size: 1.25rem;
}
.wrapper {
display: flex;
align-items: flex-start;
justify-content: flex-start;
max-width: 600px;
min-width: 600px;
margin: 6rem auto 0 auto;
}
.vertical-text {
display: flex;
transform: rotate(90deg);
border-top: 2px solid black;
padding-right: 3rem;
color: green;
font-weight: bold;
}
.items {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin-left: -5.8rem;
margin-top: -3rem;
p {
padding-left: 5rem;
}
}
|
Output: The generated CSS output will be:
style.css
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
p {
font-size: 1.25rem;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
max-width: 600px;
min-width: 600px;
margin: 6rem auto 0 auto;
}
.vertical-text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
border-top: 2px solid black;
padding-right: 3rem;
color: green;
font-weight: bold;
}
.items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-left: -5.8rem;
margin-top: -3rem;
}
.items p {
padding-left: 5rem;
}
|
index.html
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
p {
font-size: 1.25rem;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
max-width: 600px;
min-width: 600px;
margin: 6rem auto 0 auto;
}
.vertical-text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
border-top: 2px solid black;
padding-right: 3rem;
color: green;
font-weight: bold;
}
.items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-left: -5.8rem;
margin-top: -3rem;
}
.items p {
padding-left: 5rem;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="wrapper">
<div class="vertical-text">
<p>GeeksforGeeks</p>
</div>
<div class="items">
<div class="item">
<p>
GeeksforGeeks is a Computer Science
portal for geeks. It contains
well written, well thought
and well explained computer
science and programming articles.
</p>
</div>
</div>
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...