<div class="contain-anchor">
  <div class="center"></div>
  <div class="bottom"></div>
  <div class="hook"></div>
  <div class="hook hook-2"></div>
</div>

$anchor-color: #333333;
$background-color: #92d1ce;

body {
  background-color: $background-color;
}

.contain-anchor {
  position: relative;
  margin: 100px auto;
  width: 25px;
  height: 300px;
}

.center {
  background-color: $anchor-color;
  width: 25px;
  height: 250px;
}

.center:before {
  position: absolute;
  top: -60px;
  left: -28px;
  display: block;
  border: 20px solid $anchor-color;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  content:'';
}

.bottom {
  position: absolute;
  left: -110px;
  top: 30px;
  border: 20px solid $anchor-color;  
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

.bottom:before {
  position: absolute;
  left: -110px;
  top: -30px;
  background-color: $background-color;
  display: block;
  width: 200px;
  height: 140px;
  content: '';
}

.bottom:after {
  position: absolute;
  left: 115px;
  top: -30px;
  display: block;
  background-color: $background-color;
  width: 200px;
  height: 140px;
  content: '';
}

.hook {
  width: 0; 
	  height: 0; 
	  border-left: 40px dotted transparent;
	  border-right: 40px dotted transparent;
	  border-bottom: 40px solid $anchor-color;
  position: absolute;
  left: -140px;
  top: 147px;
  transform: rotate(-20deg);
}

.hook-2 {
  left: 83px;
  transform: rotate(20deg);
}

// Best with Chrome and Safari eyes