Hello friends! From our previous post we have learned how to create circles by using CSS. Today I am going to tell you how to create quarter circle by using CSS. If you wanted to learn how to create circle using CSS for that also I wrote a post. The link has mentioned in the conclusion of the post. You can check that too. Without further delay let’s start today’s lesson.
Post Outline
- Technologies for the project
- HTML code
- CSS code
- Code explanation
- Conclusion
Technologies for the project
- XAMPP Server
- HTML
- CSS
- Bootstrap
To use below code snippset and create circles you required above technologies. You can download bootstrap from official bootstrap site. HTML and CSS you don’t want to install. If you are creating a php file you need XAMPP server. If you are not creating a php file then you don’t need XAMPP. I am typing my HTML code inside a php file therefore to visible the output I am using XAMPP server to get localhost.
HTML code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/styles.css">
<!-- Custom styles for this template-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="scripts/jquery-3.3.1.min.js" ></script>
<script src="scripts/jquery-ui-1.12.1/jquery-ui.js" ></script>
<script src="scripts/popper.min.js" ></script>
<script src="bootstrap-4.1.3/js/bootstrap.min.js" ></script>
<title>Hello, world!</title>
</head>
<body>
<div class="circle"></div>
<div class="quarter-circle mt-2"></div>
<div class="quarter-circle2 mt-2"></div>
<div class="quarter-circle3 mt-2"></div>
<div class="quarter-circle4 mt-2"></div>
</body>
</html>
CSS code
.circle{
height: 100px;
width: 100px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
background-color: orange;
}
.quarter-circle{
height: 100px;
width: 100px;
border-top-left-radius: 100%;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-color: orange;
}
.quarter-circle2{
height: 100px;
width: 100px;
border-top-left-radius: 0;
border-top-right-radius: 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-color: orange;
}
.quarter-circle3{
height: 100px;
width: 100px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 0;
background-color: orange;
}
.quarter-circle4{
height: 100px;
width: 100px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 100%;
background-color: orange;
}
Code explanation
Here I am shown circle code as well as. You can adjust the height and width as you want. You cant create half circle by using this method. because they are showing below borders. I used mt-2 to keep distance between div elements. It is a way we keep margin in between elements from using bootstrap. In bootstrap margin represent with letter m and padding from letter p. You can go up to 5 to set margin and padding. As and example m-1, m-2, m-3 and so on. You can change the color by background color property.
Conclusion
I hope you understood the tutorial well. We will meet with another tutorial like this. If you like this don’t forget to comment and share. Myexamnote.com has provided many valuable tutorials so far. If you like to learn many CSS tricks check this post too. How to create circle by using CSS. Goodbye all.
I like the efforts you have put in this, regards for all the great blog posts.
Thank you so much.
As a Newbie, I am continuously browsing online for articles that can aid me. Thank you
Welcome! Keep reading us.
Hello There. I found your blog using msn. This is an extremely well written article. I’ll make sure to bookmark it and return to read more of your useful information. Thanks for the post. I will certainly comeback.
Thank you.