响应式非线性部分转换（HTML / CSS）

Question

我正在寻找一种在HTML（Bootstrap）页面中进行非水平部分转换的优雅方法。

它应该适用于移动设备以及视频或视差背景。

你有什么建议吗？

Answer 1

我看到两种可行方法：

• 使用普通的PNG图像是一个好主意，你可以明确地设置高度以及你想要的地方＆＃34; crop＆＃34;块，但这种方法需要更长的时间来加载，因为你必须加载所有的PNG图像。像这样：<div style="height: 200px; overflow: auto; background-image: your-image.png"></div>
• 您可以将CSS剪辑路径属性与多边形结合使用，实际上这有点困难，因为您必须指定要制作的多边形中的所有点。六边形示例：clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);您可以在此处查看有关剪辑路径的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

最后我会选择第一种方法。因为它更具可扩展性且更易于实现，将来如果你想改变形状，只需在你选择的某个软件中重绘它，另一方面使用clip-path你需要重新考虑所有的点和放在哪里它们。