title: Is there a way to create a complex polygon shape from any image in CSS for use in regions property?
body: <p>I'm trying to find a way to convert any black image into a polygon shape.</p>
  
  <p>The problem I'm trying to solve consists of two steps:</p>
  
  <ol>
  <li>Convert image into a polygon</li>
  <li>Fill the polygon with text</li>
  </ol>
  
  <p>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).</p>
  
  <p>Is this the only approach?</p>
  
  <p>Constraints:</p>
  
  <ul>
  <li><em>I do not want to make tons of divs that will make up a shape.</em></li>
  <li><em>I do not want to use JavaScript for this task.</em></li>
  <li><em>If a shape is complex it must be a polygon.</em></li>
  </ul>
  
  <p>Below are examples of what I'm trying to do (I'm interested only in complex polygons).</p>
  
  <p><img src="https://i.stack.imgur.com/8rQxP.jpg" alt=""></p>
  
  <p><img src="https://i.stack.imgur.com/wEj3m.png" alt=""></p>
  
  <p>Any tips on types of approaches I should use?</p>
  
  <p><strong><em>Images taken from Adobe: <a href="http://adobe.github.com/web-platform/samples/css-exclusions/" rel="nofollow noreferrer">http://adobe.github.com/web-platform/samples/css-exclusions/</a></em></strong></p>