Question

请参阅此code-pen：

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

我试图让css shape-outside在图片中雕塑右侧的div中绘制文字。

已经尝试了几个小时而没有快乐。

Answer 1

另一种方法是使用shape-outside属性的spawnObject值。

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

以下是一个例子：

＆＃13;

polygon()

＆＃13;

#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%);
}

＆＃13;

Answer 2

您正在使用的图像（link）没有任何透明度。尝试创建透明而不是白色的图像（例如来自this one的this article）。

css形状 - 外面不工作

2 个答案: