CODEWITHSUNDEEP
htmlcsscss-shapes
schraudi
schraudi

Reputation: 96

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?

Upvotes: 0

Views: 176

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105853

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>

Upvotes: 2

jbutler483
jbutler483

Reputation: 24529

If you want to create a full circle, you could use a trick with pseudo elements.

Something like:

div {
  height: 500px;
  width: 500px;
  position: relative;
  border-radius:50%;overflow:hidden;
  transform:translate(-20%, -20%); /*just for demo*/
}
div:before{
  content:"";
  position:absolute;
  top:20%;height:60%;
  left:20%; width:80%;
  background:url(http://lorempixel.com/500/600);
  background-size:100% 100%;
<div></div>

Upvotes: 2

vals
vals

Reputation: 64164

You can get this cropping circular if you offset the wrapper to the left and top (beyond the screen)

div {
  overflow:hidden;
  border-radius: 100%;
  position:relative;
  width: 600px;
  height: 600px;
  left: -400px;
  top: -200px;
}
img {
  display:block;
  position: absolute;
  right: 0px;
  top: 200px;
}
<div>
  <img src="http://lorempixel.com/300/250"/>
</div>

Upvotes: 2

Related Questions