объединение двух половинных изображений с помощью html и css

Я хочу объединить две половины изображений с помощью css, как в этой скрипке.

Я хочу, чтобы еще один такой же радиус полукруга, чтобы объединить его.

Здесь это не образ, это а 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>

Вот моя скрипка

3 ответа

  1. Я обновил jsfiddle: https://jsfiddle.net/nd3mekt3/1/

    стиль 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');
    }
    

    формат HTML:

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

    Таким образом, ваши 2 полукруга плавают рядом друг с другом, образуя целый круг.

  2. Пожалуйста, проверьте приведенный ниже фрагмент.

    Я прикрепил два изображения.

    Спасибо

    .main-blk{width:500px;height:500px;position:relative;}
    .half-circle{position:absolute;width:250px;top:0;right:0;overflow:hidden;}
    .half-circle img{left: -250px;
        position: relative;}
    .other-half-circle{position:absolute;width:250px;top:0;left:0;overflow:hidden;}
    <div class="main-blk">
    <div class = "other-half-circle">  
      <img src = "http://i.imgur.com/yAiPyc4.jpg">
    </div>
    <div class="half-circle">
      <img src = "http://i.imgur.com/CnjuZOS.jpg">
    </div>
    </div>

  3. Вы имеете в виду что-то подобное?

    Вот скрипка

    стиль CSS:

    .container {
      position: relative;
      width:200px;
    }
    .circle-left, .circle-right {
      width: 200px;
      height: 200px;
      border: 1px solid;
      border-right:0;
      border-radius: 200px 0px 0px 200px;
      position: absolute;
    }
    img {
      margin: 10px -3px;
      padding: 0;
    }
    .circle-right {
      transform: scale(-1, 1);
      clip: rect(0px,100px,200px,0px);
      right: 0;
      z-index:1;
    }
    

    Вот HTML:

    <div class="container">
      <img class="circle-left" src="http://i.imgur.com/h6YimPp.jpg" />
      <img class="circle-right" src="http://i.imgur.com/yAiPyc4.jpg" />
    </div>