In order to create box masking, you can utilize an image. For detailed instructions, refer to this article, and for a sample demonstration, visit this link (please note it only works on Webkit browsers).
<style type="text/css">
.wrap {
height:400px;
width:800px;
-webkit-mask-box-image:url('silhouette.png');
}
</style>
<div class="wrap">Lorem ipsum dolor sit amet...</div>
Result :
** UPDATE **
Exploring cutting-edge technologies!!
To enable experimental features like Shapes, Regions, and Blend Modes, follow the steps outlined on this page within the Chrome or Chrome Canary browser:
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.
Proceed with caution!!
If you dare, activate experimental features and witness the amazing shapes that can be achieved with images! Wow :)
Here is a sample pen that will only function once the experimental features are enabled => http://codepen.io/anon/pen/yhIbE
If everything goes smoothly, you should see a duck silhouette and a duck in the following paragraph, without any cropping or clipping, all text perfectly wrapped ;)
While still in the experimental stage, these features may eventually be available in all browsers, as they are detailed in the W3C draft.
Cheers!
UPDATE :
Discovered an insightful article on the topic: