css 外形不工作

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

您正在使用的图像（link) doesn't have any transparency. Try creating the image that is transparent instead of white (like this one which comes from this article 关于此事）。

Answer 2

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

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

这是一个例子：

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

css 外形不工作

css shape-outside not working

css

css-shapes