∞ Infinity symbol creation using HTML and CSS

Salow
January 2, 2022
CSS, Shape

∞ 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!