锋利的角落弯曲的背景图像

Question

一直在考虑用尖角来获得背景图像的最佳方法。我试过像border-radius和clip-path这样的css，但没有运气。我猜clip-path是最接近的答案，但无法得到它。请参阅下面的示例。

.main-header {
  background: url('http://placehold.it/150x150') no-repeat center center;
  background-position: 0% 33%;
	background-size: cover;
  min-height: 480px;
  border-radius: 0 0 45% 45%;
}

<div class="main-header">
<br>
</div>

我希望有下面的图片。

Answer 1

如果你可以通过img使用图像，而不是背景。我想你可以试试＃34; clip-path＆＃34;如下。

Codepen example

HTML：

<div class="main-header">
   <img src="http://placehold.it/150x150">
</div>

CSS：

img {
        -webkit-clip-path: circle(100% at 50% 0);
        clip-path: circle(100% at 50% 0);
    }

此网站可用于制作剪辑路径（http://bennettfeely.com/clippy/）

Answer 2

您可以使用以下代码

添加border-bottom-left-radius:60% 30%; border-bottom-right-radius:60% 30%; css。您可以使用radius属性来了解它的工作原理..

＆＃13;

＆＃13;

.main-header {
  background: url('http://placehold.it/150x150') no-repeat center center;
  background-position: 0% 33%;
	background-size: cover;
  min-height: 480px;
  border-bottom-left-radius:60% 30%;
  border-bottom-right-radius:60% 30%;
}

＆＃13;

<div class="main-header">
<br>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这种做法怎么样？ JSBin

＆＃13;

＆＃13;

body {
  background: white;
  margin: 0;
}

.main-header {
  background: url('http://www.stevensegallery.com/g/400/200') no-repeat center center;
  background-position: center;
	background-size: cover;
  min-height: 480px;
  position: relative;
}

.main-header::after {
  content: '';
  display: block;
  position: absolute;
  background: transparent;
  /* You can play around with these numbers to adjust the curve */
  bottom: -4rem;
  left: -25%;
  width: 150%;
  height: 400px;
  border-bottom: solid 4rem white;
  border-radius: 0 0 50% 50%;
}

＆＃13;

<div class="main-header">
<br>
</div>

＆＃13;

＆＃13;

＆＃13;