Question

我想使用this小提琴中的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>

这是我的fiddle

Answer 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>

这样，你的两个半圈相互浮动，整整一圈。

Answer 2

请检查以下给定的代码段。

我附上了两张图片。

<强>感谢

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

Answer 3

你的意思是这样的吗？

Here is the fiddle

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>

使用html和css组合两个半图像

3 个答案: