A Pen by Shivam Chopra.

A-Pen-by-Shivam-Chopra.markdown

A Pen by Shivam Chopra

A Pen by Shivam Chopra on CodePen.

License.

index.html

    <div class="circle"></div>
    <div class="uparrow">
      <div class="low-arrow"></div>
    </div>
  <div class="name">Tag Catalyst</div>

style.less

@color:green;

.circle{
  z-index:20;
  position:absolute;
  top:20px;
  left:20px;
  height:165px;
  width:165px;
  border-radius:50%;
  background:@color;
}
.circle::after{
  position:absolute;
  content:"";
  z-index:10;
  top:50px;
  left:48px;
  height:50px;;
  width:50px;
  border-radius:50%;
  background:@color;
  border:0.5em solid white;
}
.circle::before{
  position: absolute;
  top: 25px;
  left: 23px;
  content:"";
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: @color;
  border:0.5em solid white;
} 
.uparrow{
  z-index:21;
  position:absolute;
  top:135px;
  left:115px;
  height:0px;
  width:0px;
  background:transparent;
  border:1em solid transparent;
  border-bottom:1.7em solid @color;
  -webkit-transform:rotate(-30deg);
}
.low-arrow{
  position:absolute;
  top:26px;
  left:-11px;
  content:"";
  height:0px;
  width:0px;
  background:transparent;
  border:0.7em solid transparent;
  border-top:3em solid @color;
}
.uparrow::after{
  position:absolute;
  top:-4px;
  left:7px;
  content:"";
  background:white;
  height:35px;
  width:10px;
  -webkit-transform:rotate(-30deg);
}
.uparrow::before{
  position:absolute;
  top:-4px;
  left:-17px;
  content:"";
  background:white;
  height:32px;
  width:10px;
  -webkit-transform:rotate(30deg);
}
.name{
  margin-left:200px;
  margin-top:50px;
  font-family:sans-serif;
  font-size:100px;
}