combine two half images using html and css -

i want combine 2 half images using css in this fiddle.

i want same radius half circle combine it.

here not image, div.

<div class="half-circle">  <img src = "http://i.imgur.com/cnjuzos.jpg"> </div>  <div class = "other-half-circle">   <img src = "http://i.imgur.com/yaipyc4.jpg"> </div> 

here's fiddle

i updated jsfiddle: https://jsfiddle.net/nd3mekt3/1/

the css:

.half-circle{   float: left;   width: 250px;   height: 500px;   background: url('http://i.imgur.com/cnjuzos.jpg');   background-position: top right;  }  .other-half-circle{   float: left;   width: 250px;   height: 500px;   background-position: top right;   background: url('http://i.imgur.com/yaipyc4.jpg'); } 

the html:

<div class="other-half-circle"></div> <div class="half-circle"></div> 

this way, 2 half circles floated next each other, making whole circle.