css shape-outside not working

Question

See this code-pen:

* {
  min-height: 100%
}
#image-sculptor {
  display: block;
  height: 321px;
  width: 600px;
}
#image-sculptor-overlay {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  max-width: 100%;
  background-size: cover!important;
  -webkit-shape-outside: url('https://s3-us-west-2.amazonaws.com/blog.cherysh/2016/Apr/sculptingOutline-1460706451344.png');
}
#text-sculptor {
  position: absolute!important;
  right: 60%;
  bottom: -15%;
  width: 25%;
}

<container>
  <div id="image-sculptor" style="background:url(https://s3-us-west-2.amazonaws.com/blog.cherysh/2016/Apr/sculpting-1460436288043.jpeg);background-size:cover">
    <div id="image-sculptor-overlay" sytle="background:url(https://s3-us-west-2.amazonaws.com/blog.cherysh/2016/Apr/sculptingOutline-1460705174245.png)">
    </div>
    <div id="text-sculptor" font-to-height="0.1" line-height-ratio="1"><span>"The essence of all art is to have pleasure in giving pleasure"<br>-Dale Carnegie</span>
    </div>
  </div>
</container>

I'm trying to get css shape-outside to draw the text in the div to the right of the sculpture in the image.

Have been trying for a few hours with no joy.

Answer 1

Another approach would be to use the polygon() value for the shape-outside property.

Note that you also need to float the element with the shape-outside property and not position the text absolutely

Here is an example:

#image-sculptor {
  display: block;
  height: 321px;
  width: 600px;
}
#image-sculptor-overlay {
  float: left;
  height: 100%;
  width: 100%;
  -webkit-shape-outside: polygon(100% 100%, 0% 100%, 0% 0%, 68% 0%, 74% 15%, 70% 50%);
          shape-outside: polygon(100% 100%, 0% 100%, 0% 0%, 68% 0%, 74% 15%, 70% 50%);
}

<container>
  <div id="image-sculptor" style="background:url(https://s3-us-west-2.amazonaws.com/blog.cherysh/2016/Apr/sculpting-1460436288043.jpeg);background-size:cover">
    <div id="image-sculptor-overlay" sytle="background:url(https://s3-us-west-2.amazonaws.com/blog.cherysh/2016/Apr/sculptingOutline-1460705174245.png)">
    </div>
    <div id="text-sculptor" font-to-height="0.1" line-height-ratio="1"><span>"The essence of all art is to have pleasure in giving pleasure""The essence of all art is to have pleasure in giving pleasure""The essence of all art is to have pleasure in giving pleasure" "The essence of all art is to have, "The essence of all art is to have "The essence of<br>-Dale Carnegie</span>
    </div>
  </div>
</container>

Answer 2

The image you are using (link) doesn't have any transparency. Try creating the image that is transparent instead of white (like this one which comes from this article on the matter).