css - 使用 CSS 的曲线形状

Question

在一个布局只不过是正方形和网格的世界里，我发现了这个布局概念，并且我认为第一部分中的 flex 层是一个很棒的想法，可以创造一些不同的东西:

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>