非矩形对象周围的浮动文本

Question

我需要在我的页面上的亮片周围浮动一些文本，如所附屏幕截图所示。我不想使用 JavaScript。纯 CSS 可以做到吗？

Answer 1

如果您不太担心与旧版浏览器的兼容性，请使用 CSS 形状。

.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}

http://www.html5rocks.com/en/tutorials/shapes/getting-started/

Answer 2

padding 属性可能是您的意思吗？

.container {
  background: url('someimage.png') no-repeat left bottom;
  border: 1px solid #111;
  color: #666;
  font: 9pt/14pt 'consolas';
  padding: 40px 12px 12px 40px;
}

<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

哦...我不知道你说的是文字压在图片上！抱歉，请参阅 evilunix 的回答，因为我不想复制别人的解决方案。

非矩形对象周围的浮动文本

Floating text around a non-rectangular object

html

css

css-float