CODEWITHSUNDEEP
csscurve
Eliya Cohen
Eliya Cohen

Reputation: 11498

A way to curve (outside) an element in CSS3

I'm trying to curve an element and then add a background-image property in it. I was looking on this question - Is there a way to curve an element?. The only difference, is that I want it to be curved outside.

Here's an example:

Example of curved-outside image

This is what I tried to do: http://jsfiddle.net/KcmfC/1148/

The problem in this result is that it's too much curved. I can't find any solution for this.

#test {
  background: url('http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg') repeat center center / cover;
  border: 0px solid #000;
  width: 100%;
  min-height: 15em;
  border-radius: 0 0 100% 100%;
}
<div id="test"></div>

Upvotes: 1

Views: 1139

Answers (3)

Quack
Quack

Reputation: 361

What about this?

#test {
  background: url('http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg') repeat center center / cover;
  border: 0px solid #000;
  width: 100%;
  min-height: 15em;
  border-radius: 0 0 70% 70% / 20%;
}
<div id="test"></div>

Upvotes: 0

Asons
Asons

Reputation: 87252

You can use a pseudo element

div {
  background: gray url(http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg) no-repeat center bottom -25px / cover;
  height: 180px;
  position: relative;      
}
div:after {
  content: '';
  background: gray url(http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg) no-repeat center bottom / cover;
  border-radius: 50%;
  width: 100%;
  height: 50px;
  top: calc(100% - 25px);
  left:0;
  position: absolute;
}
<div></div>

Upvotes: 1

Eliya Cohen
Eliya Cohen

Reputation: 11498

The thing I did is a bit tricky, I stretched the width to 140% and the I "cut" the edges via overflow: hidden. Here's my full example:

#test {
  position: relative;
  overflow: hidden;
  min-height:  150px;
}
#test:before {
    background: url('http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg') repeat center center / 1048px 319px;
    border: 0px solid #000;
    content: "";
    width: 140%;
      height: 100%;
    border-radius: 0 0 100% 100%;
    position: absolute;
    z-index: -1;
    left: -20%;
    right: -20%;
}
<div id="test">
  <div>
 SOME TEXT SOME TEXT SOME 
  </div>
</div>

Upvotes: 2

Related Questions