Curved sides with css

[candell]

I am trying to produce this type of effect with css

https://pasteboard.co/auXOYg1BQ.jpg

As you can see, the left and bottom sides are curved. I’ve been trying to achieve this with border-radius but not quite managed it

border-bottom-left-radius: 100%40px;border-bottom-right-radius: 100%10px;border-top-left-radius: 100%10px;

https://codepen.io/anon/pen/aWMqeX

Could any css wizards help with this?

Thanks

[Atelierbram]

The border-radius definition want spaces between units. Have you tried playing with transform: skew, and/or box-shadow?

img {
  border-bottom-left-radius: 50% 10%;
  border-bottom-right-radius: 50% 10px;
  border-top-left-radius: 0;
  transform: skew(-5deg, -2deg);
  margin: 2em 3em;
  box-shadow: 8px 1px 12px rgba(0,0,0,.3)
}

Note some browsers, like Safari, do have problems with border-radius set directly on the img element. Often one ends up wrapping the image in an extra div or a link, and set the border-radius on that to make it work cross-browsers.

[candell]

Thank you for the reply, I did look in to skew however the top and right hand sides should be straight, i.e. 0% and 90%, skewing the image puts them at an angle.

I don’t mind wrapping the image in a div, I do actually have a div that needs the same treatment elsewhere in the design, I suppose with a div we also have :before and :after to play with.

[Atelierbram]

I suppose with a div we also have :before and :after to play with

Yes, go for it!

[candell]

I’m exhausting my skills here

https://codepen.io/anon/pen/aWMqeX

[Atelierbram]

I tried skewing the pseudo-element back in the other direction:

http://codepen.io/atelierbram/pen/YVgOOv

[candell]

Got it, thanks for the pointers.

A bit of light reading in horizontal and vertical radius and before and after and it’s how I want it

https://codepen.io/anon/pen/aWMqeX

[Author]

Posts