CSS Push Pin

by aaronogan

HTML

<span class="unpinned"></span>
<span class="pinned"></span>

CSS

.unpinned {
  font-size: 2.5em; 
  position: relative; 
  display: inline-block; 
  background-color: gray; 
  width: .2em;
  height: .3em; 
  margin: auto 1.15em .35em; 
  border-width: .08em .1em .1em; 
  border-style: solid; 
  border-color: gray white; 
  -webkit-transform: rotate(45deg); 
  transform: rotate(45deg); 
  border-radius: .1em .1em 0 0;
}
.unpinned:before {
  content: ""; 
  background-color: gray; 
  position: absolute; 
  top: 0;
  left: .08em; 
  width: 2px;
  height: .75em; 
  border-radius: 0 0 .05em; 
}

.pinned {
  font-size: 2.5em; 
  position: relative; 
  display: inline-block; 
  background-color: black; 
  width: .2em;
  height: .3em; 
  margin: auto 1.15em .35em; 
  border-width: .08em .1em .1em; 
  border-style: solid; 
  border-color: black white; 
  /*-webkit-transform: rotate(45deg); */
  /*transform: rotate(45deg); */
  border-radius: .1em .1em 0 0;
}
.pinned:before {
  content: ""; 
  background-color: black; 
  position: absolute; 
  top: 0; left: .08em; 
  width: 2px; height: .75em; 
  border-radius: 0 0 .05em; 
}