css shape-outside 不工作

Question

查看此 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>

我正在尝试让 css shape-outside 将 div 中的文本绘制到图像中雕塑的右侧。

已经尝试了几个小时，没有任何乐趣。

Answer 1

另一种方法是对 shape-outside 使用 polygon() 值属性(property)。

请注意，您还需要使用 shape-outside 属性 float 元素，而不是绝对定位文本

这是一个例子:

#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>