裁剪边框半径非常大的图像

Question

今天我从设计师处获得了一个网站布局。

背景是整个身体的图案。 标题图像在右侧弯曲。

以下是截图：

我无法在CSS中使用border-radius构建那种半径。 PNG掩码不是一个选项，因为模式必须匹配。

知道一个特殊的技巧，在CSS中构建那种border-radius吗？

Answer 1

包装器，位置，半径和阴影可以做一些非常接近的事情：

有关border-radius的更多信息：

  

https://www.w3.org/TR/css3-background/#the-border-radius

＆＃13;

＆＃13;

double precision, allocatable :: x(:)
allocate(x(1000))

＆＃13;

double precision, allocatable :: x(:)

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您将包装纸偏移到左侧和顶部（屏幕之外），则可以获得此裁剪圆形

div {
  overflow:hidden;
  border-radius: 100%;
  position:relative;
  width: 600px;
  height: 600px;
  left: -400px;
  top: -200px;
}
img {
  display:block;
  position: absolute;
  right: 0px;
  top: 200px;
}

<div>
  <img src="http://lorempixel.com/300/250"/>
</div>

Answer 3

如果你想创建一个完整的圆圈，你可以使用伪元素技巧。

类似的东西：

div {
  height: 500px;
  width: 500px;
  position: relative;
  border-radius:50%;overflow:hidden;
  transform:translate(-20%, -20%); /*just for demo*/
}
div:before{
  content:"";
  position:absolute;
  top:20%;height:60%;
  left:20%; width:80%;
  background:url(http://lorempixel.com/500/600);
  background-size:100% 100%;

<div></div>