html - 裁剪边界半径非常大的图像

Question

今天我从一个网站的设计师那里得到了一个布局。

背景上是全身的图案。标题图像在右侧 flex 裁剪。

截图如下:

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

知道某人的特殊技巧，可以在 CSS 中构建那种 border-radius 吗？

Answer 1

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

有关边界半径的更多信息:

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

div {
  box-shadow:inset 0 0 10px white, inset 0 0 15px gray;
  display:table;/* or inline-block/inline-table */
  overflow:hidden;/* clip content */
  border-radius:0  20% 20% 0 /80%;/* cut off basic border-radius */
  position:relative;/* bring at front so img doesn't fade behind body */
}
img {
  display:block;/* gap underneath .. or vertical-align:top/bottom */
  position:relative;
  z-index:-1;/* let inset shadow of parent lay over it */
}
body {
  background:brown
}

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