How to make a complex line in pure CSS ?
Last Updated :
25 Aug, 2022
In this article, we will learn how to make a complex line in Pure CSS. We can achieve this task by creating the CSS border property around the HTML div element.
Property Used:
- width: This property is used to define the width of the element.
- height: This property is used to define the height of the element.
- border-left: This property is used to define the border at the left position.
- border-right: This property is used to define the border at the right position.
- border-bottom: This property is used to define the border at the bottom position.
- border-top: This property is used to define the border at the top position.
Example 1: In the below code, we will make use of the above property to create a complex line.
HTML
<!DOCTYPE html>
< html >
< head >
< title >GeeksforGeeks</ title >
< style >
.GFG {
background-color: green;
padding: 40px;
margin: 40px;
}
.GFG .line {
width: 50px;
height: 50px;
border-left: 5px solid black;
border-bottom: 5px solid black;
}
.GFG .line:first-child {
border-top: 5px solid black;
}
</ style >
</ head >
< body >
< center >
< h1 style = "color:green;" >GeeksforGeeks</ h1 >
< h3 >A computer science portal for geeks</ h3 >
</ center >
< div class = "GFG" >
< div class = "line" ></ div >
< div class = "line" ></ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In the below code, we will make use of the above property to create a complex line.
HTML
<!DOCTYPE html>
< html >
< head >
< title >GeeksforGeeks</ title >
< style >
.GFG {
background-color: green;
padding: 40px;
margin: 40px;
}
.GFG .line {
width: 50px;
height: 50px;
border-right: 5px solid black;
border-bottom: 5px solid black;
}
.GFG .line:first-child {
border-top: 5px solid black;
}
</ style >
</ head >
< body >
< center >
< h1 style = "color:green;" >GeeksforGeeks</ h1 >
< h3 >A computer science portal for geeks</ h3 >
</ center >
< div class = "GFG" >
< div class = "line" ></ div >
< div class = "line" ></ div >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...