Search code examples
htmlcsscss-shapes

Crop an image with a very big border radius

Today I got a layout from a designer for a website.

On the background is a pattern over the whole body. The header image is curved croped on the right side.

Here is a screenshot:

enter image description here

I can't build that kind of radius with border-radius in CSS. A PNG mask isn't an option, because the pattern must match.

Knows someone a special trick, to build that kind of border-radius in CSS?

Solution

  • a wrapper, position, radius and shadow can do something really close :

    for more info about border-radius:

    https://www.w3.org/TR/css3-background/#the-border-radius

    div {
  box-shadow:inset 0 0 10px white, inset 0 0 15px gray;
  display:table;/* or inline-block/inline-table */
  overflow:hidden;/* clip content */
  border-radius:0  20% 20% 0 /80%;/* cut off basic border-radius */
  position:relative;/* bring at front so img doesn't fade behind body */
}
img {
  display:block;/* gap underneath .. or vertical-align:top/bottom */
  position:relative;
  z-index:-1;/* let inset shadow of parent lay over it */
}
body {
  background:brown
}
    <div>
  <img src="http://lorempixel.com/300/250"/>
</div>