HTML/CSS中的自定义形状文本区域

5
在HTML/CSS中是否可以拥有自定义形状的文本区域(超过4个边缘的文本区域)? 如何实现?类似于这样的东西:
enter image description here
如果可能,还可以创建更复杂的形状,例如:
enter image description here
4个回答

2

我在提供这个链接的时候感到非常担心,因为它的语义非常不清晰。你最终会得到大量的 div,其唯一目的是为了创建文本的“包装点”。

但无论如何,以下是你可以完成你所需的方法。我个人只会出于兴趣或在自己的网站上使用类似的方法,但可能不适用于其他公共生产网站。

http://www.csstextwrap.com/


1
这是一个非常老的问题,但仍然在谷歌搜索中排名靠前,所以这里是您今天可能正在寻找的答案:shape-outside(如果您不关心IE或Edge) 不幸的是,在六边形示例中没有shape-inside,但可以通过在两侧使用shape-outside来实现,如链接文章中所述。

enter image description here


0

对于最佳结果,如果您有以下HTML代码,则应该得到类似于您要查找的内容

<div style="width:'textbox-width';">
    <img  style="float: right" />
    <span>text goes here</span>
</div>

如果图像是您需要的空白间隔,则跨越图像并显示如上所示的文本应包装在 span 中。

使用三角形图像可能可以使用相同的方法实现六边形


1
真的有“三角形图像”这样的东西吗?我认为无论什么图像都是矩形的。它可能是一个三角形的图像,但图像本身是一个矩形。gif和png图像可以具有透明度,但并没有真正不同的边缘。也许css3变换可以使图像呈现出角度? - keithwyland
没错,我没有完全考虑清楚。如果您在彼此之上使用不同宽度的图像选择,则可能是可能的,从而给人三角形图像的印象。但这可能会带来更多麻烦,不值得这样做。 - Kit Barnes

0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接