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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

有关此https://css-tricks.com/almanac/properties/c/clip/

的更多信息

http://bennettfeely.com/clippy/

上的基本示例

请注意，clip-path

中尚未实现

Error response: The error is happening on send @jquery-1.10.2.js:6.

send @jquery-1.10.2.js:6
x.extend.ajax @jquery-1.10.2.js:6
$.find.jqBootstrapValidation.submitSuccess  @shibui.js:82
(anonymous function) @jqBootstrapValidation.js:76
x.event.dispatch @jquery-1.10.2.js:5
v.handle @jquery-1.10.2.js:5

祝你好运

使用CSS的曲线形状

2 个答案: