CSS Shapes布局

CSS Shapes 布局是一个强大的 CSS 功能，它允许开发者定义复杂的形状作为内容的布局容器边界，而不仅仅是传统的矩形或圆形。通过使用 CSS Shapes，你可以创建文本环绕不规则形状的效果，如图片、SVG 图形或其他 HTML 元素。这在创建视觉吸引力和改善页面布局方面非常有用。

CSS Shapes 的基本使用

CSS Shapes 主要通过几个属性来实现：

shape-outside：这个属性是最关键的，它允许你定义一个形状，文本将围绕这个形状进行布局。你可以使用多种值来定义形状，包括圆形（circle()）、椭圆（ellipse()）、多边形（polygon()）以及图像（url() 指向的图片或 SVG）。
shape-margin：这个属性定义了形状外部的一个额外空间，文本不会进入这个空间内。它可以帮助你微调文本与形状之间的距离。
shape-image-threshold：当使用图像作为形状时，这个属性定义了图像中哪些部分被视为形状的内部（通常是基于图像的 alpha 通道）。

示例

使用 `polygon()` 创建多边形形状

<div class="shape-container"><img src="irregular-shape.png" alt="Irregular Shape" class="float-shape"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.</p>
</div><style>
.float-shape {float: left; /* 浮动图片 */shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);width: 300px;height: 200px;
}
</style>

在这个例子中，.float-shape 类使用 polygon() 函数定义了一个菱形形状，文本将围绕这个菱形进行布局。

使用 SVG 图像作为形状

<div class="shape-wrapper"><img src="path/to/your-svg.svg" alt="SVG Shape" class="svg-shape"><p>Your text content here...</p>
</div><style>
.svg-shape {float: left;shape-outside: url('path/to/your-svg.svg');shape-margin: 20px;width: 200px;height: 200px;
}
</style>