html - 响应式非线性部分过渡 (HTML/CSS)

Question

我正在寻找一种优雅的方式来在我的 HTML（引导程序）页面中进行非水平部分转换。

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

你有什么建议吗？

Answer 1

我看到两种方法可用：

• 使用纯 PNG 图像是一个好主意，您可以明确设置高度以及要“裁剪”块的位置，但是这种方法需要更长的时间来加载，因为您必须加载所有 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 您将不得不重新考虑所有点以及放置位置他们。