Connect with us!
∞ Infinity symbol creation using HTML and CSS
∞ Infinity is mostly introduced to us in the math classes. Infinity is characterized as uncountable objects or numbers no limit or size. The infinity symbol (∞) created by John Wallis, an English mathematician who lived and worked in the 17th century.
Here is the code for creating the Infinity.
.infinity {
position: relative;
width: 212px;
height: 100px;
box-sizing: content-box;
}
.infinity:before,
.infinity:after {
content: "";
box-sizing: content-box;
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
border-radius: 50px 50px 0 50px;
transform: rotate(-45deg);
}
.infinity:after {
left: auto;
right: 0;
border-radius: 50px 50px 50px 0;
transform: rotate(45deg);
}Here is the Output:
You can find the complete coding tutorial in the following YouTube Video
Here is the complete code to run the Infinity using HTML and CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.infinity {
position: relative;
width: 212px;
height: 100px;
box-sizing: content-box;
}
.infinity:before,
.infinity:after {
content: "";
box-sizing: content-box;
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
border-radius: 50px 50px 0 50px;
transform: rotate(-45deg);
}
.infinity:after {
left: auto;
right: 0;
border-radius: 50px 50px 50px 0;
transform: rotate(45deg);
}
</style>
<title>Salow Studios</title>
</head>
<body>
<h1>Infinity Symbol</h1>
<div class="infinity"></div>
</body>
</html>
Thank you for reading. I hope that it has helped you with your project. Good luck and happy coding!
