CODEWITHSUNDEEP
csscss-shapes
user3130064
user3130064

Reputation: 1071

Curved shapes using CSS

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

Answers (2)

Dariusz Sikorski
Dariusz Sikorski

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

Joel Almeida
Joel Almeida

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

Related Questions