Skip to content

Instantly share code, notes, and snippets.

@shivamchopra
Created October 11, 2013 07:43
Show Gist options
  • Save shivamchopra/6931042 to your computer and use it in GitHub Desktop.
Save shivamchopra/6931042 to your computer and use it in GitHub Desktop.
A Pen by Shivam Chopra.
<div class="circle"></div>
<div class="uparrow">
<div class="low-arrow"></div>
</div>
<div class="name">Tag Catalyst</div>
@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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment