响应式非线性部分过渡（HTML/CSS）
Responsive non-linear section transition (HTML/CSS)
我正在寻找一种优雅的方式在我的 HTML (Bootstrap) 页面中进行非水平部分过渡。
它应该适用于移动设备以及视频或视差背景。
你有什么建议吗？
我看到了两种可用的方法：
- 使用纯 PNG 图像是个好主意，您可以明确设置块的高度和位置 "crop"，但这种方法需要更长的时间来加载，因为您必须加载所有 PNG图片。像这样：
<div style="height: 200px; overflow: auto; background-image: your-image.png"></div>
- 您可以使用 CSS clip-path 属性 结合多边形，这实际上有点困难，因为您必须指定要制作的多边形中的所有点。六边形示例：
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 你将不得不重新考虑所有的点和放在哪里他们。
我正在寻找一种优雅的方式在我的 HTML (Bootstrap) 页面中进行非水平部分过渡。
它应该适用于移动设备以及视频或视差背景。
你有什么建议吗？
我看到了两种可用的方法：
- 使用纯 PNG 图像是个好主意，您可以明确设置块的高度和位置 "crop"，但这种方法需要更长的时间来加载，因为您必须加载所有 PNG图片。像这样：
<div style="height: 200px; overflow: auto; background-image: your-image.png"></div> - 您可以使用 CSS clip-path 属性 结合多边形，这实际上有点困难，因为您必须指定要制作的多边形中的所有点。六边形示例：
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 你将不得不重新考虑所有的点和放在哪里他们。