使用 CSS 的曲线形状

Question

在一个布局只不过是正方形和网格的世界里，我发现了这个布局概念，并且我在第一部分中的那个弯曲层是一个创造不同东西的惊人想法：

https://www.behance.net/gallery/28594475/Accrosport

但现在我怀疑了。我怎样才能用 css 做到这一点？任何人都知道如何做到这一点并重新创建一个简单的示例？我尝试使用 border-radius 重新创建它，但它有点奇怪：

http://codepen.io/anon/pen/GpRQaZ

css：

.curved {
  position: relative;
  width: 100%;
  height: 600px;
  margin: 20px 0;
  background-image: url('http://www.erikaalkblog.com.br/wp-content/uploads/2015/07/yoga2.jpg');
  background-size: cover;
  border-radius: 250% 250% 250% 250% / 0% 0% 20% 20%;
  color: white;
  text-align: center;
  text-indent: .1em;
}

提前致谢

Answer 1

从您的示例中，这就是他们正在使用的内容：

.curved {
  position: relative;
  width: 100%;
  height: 600px;
  margin: 20px 0;
  background-image: url('http://www.erikaalkblog.com.br/wp-content/uploads/2015/07/yoga2.jpg');
  background-size: cover;
  border-bottom-right-radius: 50% 7%;
  border-bottom-left-radius: 50% 7%;
  color: white;
  text-align: center;
  text-indent: .1em;
}

<div class="curved"></div>