https://stackoverflow.com/questions/23178340
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian
The solution without using svg is very tricky, the idea is you need some wrapper containing your actual image, this wrapper should have a very large size (in this example, I used the size 945 x 500) so that it can render a large curve. We need to set the overflow:hidden for this container to hide other overflow part of the inner image. This trick will function like a clipper which can cut off the image by the curve.
Also note that we will use some fairly new feature of CSS3 in this example (without them I don't think we can do at best), that is the clip property, in fact we don't really need this (because the background of the container is transparent which will be seen through). For clip to work, we have to apply position:absolute for the container, that means we have to use absolute position for the container. So to position the container, you have to change the left and top property. In fact there are offsets between the actual image and the container, so there will be a problem, for example, the horizontal offset is 200px, but when you set the left position for the container as 100px, you want that is exactly the left of the inner image. If we don't do anything, normally the left of the inner image will be 100 + 200 = 300px. So to deal with this, we have to apply some translate transform to the container (translate it horizontally about -200px, so the final computed value for the left will be 300px - 200px = 100px which is the result we want. Here are the code details:
HTML:
<div id='clipper'>
<div></div>
</div>
CSS:
#clipper > div {
width:400px;
height:200px;
background:url(http://placekitten.com/400/200);
position:absolute;
left:calc(50% - 300px);
top: calc(100% - 200px);
-webkit-filter: blur(1px);
}
#clipper {
border-bottom-left-radius:1800px 500px;
border-bottom-right-radius:1800px 800px;
overflow:hidden;
height:500px;
width: 945px;
position:absolute;
clip: rect(300px, 573px, 500px,173px);
-webkit-transform: translate(-173px, -300px);
left: 100px;
top:50px;
}
Working Demo.
NOTE: The blur effect I used in the example is just for demonstrative purpose, it works only on webkit-based browsers, I know it's hard to have a cross-browser solution and I suppose it's your own part. The last thing I want to note is I've already mentioned that this is very tricky, it requires trial and error, if you want to change the size of the image, you may have to redo the steps with trial and error to achieve the effect you want. This answer just mainly shows the principle and mechanism to achieve the effect.
Issue: Looks like there is still a nasty issue, although the large container clipper is clipped and transparent but it is still able to make the horizontal scrollbar appear. I think this issue is fairly annoying. We can set the body { overflow-x:hidden;} but it depends on other contents... I hope someone will find a nice solution for this issue and post directly or as link reference in the comment. I would be appreciated that.
Update: Just found the solution for the issue above, we need to wrap another container with the size being equal to the inner image, set overflow:hidden for this outermost container. Of course to position the inner image, we just change the left and top of this outermost container (instead of the clipper as before). Here is the Complete Demo.
