Is there a way to create a complex polygon shape from any image in CSS for use in regions property?

Question

I'm trying to find a way to convert any black image into a polygon shape.

The problem I'm trying to solve consists of two steps:

1. Convert image into a polygon
2. Fill the polygon with text

I'm struggling with the first step. As I haven't found any "converter" the only idea I am left with is to convert an image into an SVG format (if it isn't an SVG already), then fetch the vector data and paste it in right inside the CSS polygon shape (similarly as done with Raphaël.js).

Is this the only approach?

Constraints:

• I do not want to make tons of divs that will make up a shape.
• I do not want to use JavaScript for this task.
• If a shape is complex it must be a polygon.

Below are examples of what I'm trying to do (I'm interested only in complex polygons).

Any tips on types of approaches I should use?

Images taken from Adobe: http://adobe.github.com/web-platform/samples/css-exclusions/

Swell

Sadly this has still not come to be. Here's an article that provides more insight about the soon-to-be capabilities that resemble what you want using CSS regions – Oxalate

This almost answers my question: sarasoueidan.com/blog/css-regions-with-shapes-for-readability/… – Swell

Answer 1

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.

• Shape inside with data uris and images
• Shape alpha channel treeshold

Cheers!

EDIT :

Found a nice article about the subject : http://hansmuller-webkit.blogspot.com.es/2013/11/css-shapes-from-images.html

Antivenin