波浪/曲线模块

Question

我目前正在开发一个网站，该网站采用模块化设计，包含文本模块，图像模块，2列模块......用户可以随意添加/删除/重新排序。

每个模块都有一个波浪/曲线边框：

用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

我认为有三种方法值得探索：

1. Css具有名为剪辑路径mozilla，css-tricks的属性。您可以使用它来使用非标准容器。

2. SVG，特别是标记clipPath，它可以为您提供更大的灵活性mozilla

3. 使用预定义的背景，但要使规则没有两个图像模块自己附加到它们。通过这种方式，您可以将纯色模块的z-index始终放在最前面，事实上允许您的背景裁剪图像。您甚至可以使用svg＆＃39; s制作这些形状，以便从html / css级别进行微小和可管理（您可以动态创建新形状）。

祝你好运并告诉我你的决定;）