使用 CSS 的曲线形状

Question

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

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

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

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>

Answer 2

这可以通过 css clip-path 使用 path.svg 文件作为形状来实现。

关于此的更多信息https://css-tricks.com/almanac/properties/c/clip/

http://bennettfeely.com/clippy/

上的基本示例

请注意 clip-path 尚未在 IE 中实现 http://caniuse.com/#search=clip-path

祝你好运

使用 CSS 的曲线形状

Curved shapes using CSS

css

css-shapes