css外部形状不起作用

Question

查看此代码笔：

* {
  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()值。

注意，您还需要使用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>

Answer 2

您使用的图像（链接）没有任何透明度。试着创建一个透明的图像，而不是白色的（比如这篇文章中的图像）。