You can use a image for box masking, details in this article and a sample in this link (webkit sample only)
<style type="text/css">
.wrap {
height:400px;
width:800px;
-webkit-mask-box-image:url('silhouette.png');
}
</style>
<div class="wrap">Large lipsum here...</div>
Result :
** EDIT **
Moar close edgy techs!!
You need to go to http://html.adobe.com/webplatform/enable/ in the chrome or chrome canary section you will find a line that says :
To enable Shapes, Regions, and Blend Modes:
- Copy and paste chrome://flags/#enable-experimental-web-platform-features into the address bar, then press enter.
- Click the 'Enable' link within that section.
- Click the 'Relaunch Now' button at the bottom of the browser window.
Note: Multiple features can be enabled before relaunching.
Here be dragons!!
If you are brave enough, activate experimental features and you will suffer all the awosemeness of the mighty shapes from images! woow :)
here you have a sample pen that will only work when you had activated the experimental features => http://codepen.io/anon/pen/yhIbE
If it all went ok, you might see a duck silhouette and a duck in the later paragraph, and it is all not cutted or clipped it has all text wrapped ;)
It's all very experimental, but some day you will be able to do such things in all browsers, because every aspect detailed in this post is in the W3C draft.
Cheers!
EDIT :
Found a nice article about the subject : http://hansmuller-webkit.blogspot.com.es/2013/11/css-shapes-from-images.html