html - 波浪/曲线模块的

Question

我目前正在开发一个具有模块化设计的网站，其中包含文本模块、图像模块、2 列模块......用户可以根据需要添加/删除/重新排序它们。

每个模块都有一个波浪形/flex 的边框:

有没有可能用css做这样的东西？

每个模块都会重叠:

我想到的一个解决方案是在 div 之前和之后为模块提供波浪形/曲线背景图像，并为它们提供负边距，但很快意识到这不适用于图像模块:

.module.style-2 {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC7gAAAABAQMAAAB0GXF9AAAABlBMVEX////09PQtDxrOAAAAD0lEQVQY02P4PygBw3AHAG6mlWu52WYpAAAAAElFTkSuQmCC');
    background-repeat: repeat-y;
    background-position: 40% 0; 
}

.module.style-2:before {
    height: 100px;
    width: 100%;

    margin-top: -100px;
    position: absolute;
    content: '';
    background-image: url('top-curvy-background-1.png');
    background-repeat: no-repeat;
    background-position: 40% 0; 
}

.module.style-2:after {
    height: 150px;
    width: 100%;

    position: absolute;
    content: '';
    background-image: url('bottom-curvy-background-1.png');
    background-repeat: no-repeat;
    background-position: center; 
    background-position: 40% 0; 
}

CodePen

感谢您的帮助

Answer 1

我看到了 3 种值得探索的方法:

1. CSS 具有名为 clip path 的属性 mozilla , css-tricks .您可以使用它来使用非标准容器。

2. SVG，尤其是标签 clipPath，它可能会给您更多灵 active mozilla

3. 使用预定义的背景，但不要将两个图像模块附加到它们上。通过这种方式，您可以使用 z-index 使纯色模块始终位于顶部，实际上允许图像被背景裁剪。您甚至可以使用 svg 制作这些形状，使其变得小巧，并且可以从 html/css 级别进行管理(您可以动态创建新形状)。

祝你好运，告诉我你的决定;)