Logo Konoha Dengan CSS3

CSS3

/* Icon */
.sc-icon {
  width:70px;
  height:70px;
  background-color:#aaadaa;
  position:relative;
  margin:1px;
  display:inline-block;
  text-decoration:none !important;
  -webkit-box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.2),1px 1px 5px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.2),1px 1px 5px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.2),1px 1px 5px rgba(0,0,0,0.4);
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
}

.sc-icon *,
.sc-icon *:before,
.sc-icon *:after {
  position:absolute;
}

.sc-icon:hover {
  position:relative;
  top:-2px;
}

.sc-icon:after {
  content:"";
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  background-image:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.1) 45%,rgba(255,255,255,0) 100%);
  background-image:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.1) 45%,rgba(255,255,255,0) 100%);
  background-image:-ms-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.1) 45%,rgba(255,255,255,0) 100%);
  background-image:-o-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.1) 45%,rgba(255,255,255,0) 100%);
  background-image:linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.1) 45%,rgba(255,255,255,0) 100%);
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
  z-index:87;
}

.sc-icon:hover:after {
  -webkit-background-size:100% 80px;
  -moz-background-size:100% 80px;
  -ms-background-size:100% 80px;
  -o-background-size:100% 80px;
  background-size:100% 80px;
}
/* Konoha */
.konoha div,
.konoha div:before,
.konoha div:after,
.konoha div span,
.konoha div span:after {
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:2px solid transparent;
}

.konoha div {
  width:30px;
  height:30px;
  border-color:#000000 transparent transparent #000000;
  top:20px;
  left:22px;
}

.konoha > span {
  width:10px;
  border-bottom:2px solid #000000;
  top:20px;
  right:12px;
  -webkit-transform:rotate(-50deg);
  -moz-transform:rotate(-50deg);
  -ms-transform:rotate(-50deg);
  -o-transform:rotate(-50deg);
  transform:rotate(-50deg);
}

.konoha > span:after {
  content:"";
  width:10px;
  height:10px;
  border:2px solid #000000;
  border-width:2px 0px 0px 2px;
  -webkit-transform:rotate(-10deg) skewX(30deg);
  -moz-transform:rotate(-10deg) skewX(30deg);
  -ms-transform:rotate(-10deg) skewX(30deg);
  -o-transform:rotate(-10deg) skewX(30deg);
  transform:rotate(-10deg) skewX(30deg);
  bottom:-2px;
  left:-37px;
}

.konoha div:before {
  content:"";
  width:23px;
  height:23px;
  top:3px;
  left:-2px;
  border-color:transparent #000000 #000000 transparent;
}

.konoha div:after {
  content:"";
  width:17px;
  height:17px;
  border-color:#000000 transparent transparent #000000;
  top:5px;
  left:4px;
}

.konoha div span {
  width:11px;
  height:11px;
  border-color:transparent #000000 #000000 transparent;
  top:9px;
  left:4px;
}

.konoha div span:after {
  content:"";
  width:5px;
  height:5px;
  border-color:#000000 transparent transparent #000000;
  top:0px;
  left:4px;
}

<div class="sc-icon konoha" title="Konoha">
    <div><span></span></div>
    <span></span>
</div>