html - 尖 Angular flex 的背景图像

Question

一直在思考什么是获得带有尖 Angular 的背景图像的最佳方式。我尝试了一些 css，例如 border-radius 和 clip-path 但没有成功。我想 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

这种方法怎么样？ JSBin

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

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