Раздвоение блока на CSS3

a{ 
  float:right; 
  position:relative; 
  display:block; 
} 
span{ 
  display:inline-block; 
  position:relative; 
  padding:1rem; 
  background:#276cae; 
  border-top-left-radius:1rem; 
  z-index:2; 
} 
a:before{ 
  content:''; 
  position:absolute; 
  top:1rem; 
  left:-1rem; 
  width:1rem; 
  height:102rem; 
  background:rgba(108, 151, 197, 0.5); 
  border-top-left-radius:1rem; 
  border-bottom-left-radius:1rem; 
} 
a:after{ 
  content:''; 
  position:absolute; 
  top:2rem; 
  left:-2rem; 
  width:2rem; 
  height:100rem; 
  background:rgba(108, 151, 197, 0.5); 
  border-top-left-radius:1rem; 
  border-bottom-left-radius:1rem; 
} 
i{ 
  display:block; 
  position:relative; 
  height:4px; 
  width:50px; 
  margin:5px 0; 
  background:#fff; 
  border-radius:4px; 
}

<a href="#"><span><i></i><i></i><i></i></span></a>