Reputation: 1071
In a world where layouts is nothing more than squares and grids, I found this layout concept and I tought that curved layer in the first section an amazing idea to create something different:
https://www.behance.net/gallery/28594475/Accrosport
But now I'm in doubt. How can I do it with css? Anyone has an idea in how to do it and recreate a simple example? I tried to recreate that using border-radius, but it got a bit strange:
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;
}
Thanks in advance
Upvotes: 1
Views: 7065
Reputation: 4407
This can be achieved with css clip-path
using path.svg
file as a shape.
More on this https://css-tricks.com/almanac/properties/c/clip/
Basic examples on http://bennettfeely.com/clippy/
Note that clip-path
has not been implemented in IE http://caniuse.com/#search=clip-path
Good luck
Upvotes: 1
Reputation: 8057
From your example this is what they are using:
.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>
Upvotes: 5