Skip to main content
infinite symbol with css

Shining infinite Symbol with single HTML element.

Hello guys, hows you doing. today i m gonna show you to how to make a simple infinite symbol or logo or you can say shape with pure css. Actually it’s very simple, what you have to do is just to make a single div in html and after that you have to style it with css selectors :after and :before

step:1) Give height and width to your element.

step:2) Style your element with :after selector by giving border-radius and then simply rotate it.

step:3) Style your element with :before selector by giving border-radius and then simply rotate it.

step:4) Actually, there isn’t any step-4.


<div class="symbol"></div>

body{
  background:#333;
}
.symbol{
  position:absolute;
  width:200px;
  height:100px;
  margin-left:40%;
  margin-top:5%;
}
.symbol:before,.symbol:after{
  content:"";
  top:0px;
  left:0px;
  position:absolute;
  width:80px;
  height:80px;
  border:2px solid transparent;
  box-shadow:
    inset 0 0 12px #0cc, /* Inset shadow */
    0 0 12px #0cc, /* Outset shadow */
    inset -999px 0 0 transparent; /* The background color */
  border-radius:50px 50px 0px 50px;
  -moz-border-radius:50px 50px 0px 50px;
  transform:rotate(-45deg);
}
.symbol:after{
  left:auto;
  right:0;
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 50px 50px 50px 0;
  transform:rotate(45deg)
}

Okay, tweak with css and understand this selectors of css, they are amazing!!