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

Question

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

背景上是整体的图案body。 header 图像在右侧被弯曲裁剪。

这是截图：

我无法在 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>

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>

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

Crop an image with a very big border radius

html

css

css-shapes