【发布时间】：2018-01-12 10:34:20
【问题描述】：
我正在寻找一种优雅的方式来在我的 HTML（引导）页面中进行非水平部分转换。
它应该适用于移动设备，也适用于视频或视差背景。
你有什么建议吗？
【问题讨论】：
标签： html css bootstrap-grid
【发布时间】：2018-01-12 10:34:20
【问题描述】：
我看到了两种可用的方法：
- 最好使用纯 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 您将不得不重新考虑所有点以及放置位置他们。
【讨论】：
-
感谢您的方法我想我会尝试第一个。使用 boostrap 的标记看起来如何？你会把背景图片（行）放在哪里？
<body> <div class="container"> <div class="row" id="section_1"> <div class="col-md-12"></div> </div> <div class="row" id="section_2"> <div class="col-md-12"></div> </div> <div class="row" id="section_3"></div> </div> </body> -
我会将它们放在带有 col 的 div 中，例如
<body> <div class="container"> <div class="row" id="section_1"> <div class="col-md-12"><div style="height: 200px; overflow: auto; background-image: your-image.png"></div> </div> </div> </body>，当然，为您使用的每种样式创建一个类是一个好习惯，因此不要使用 'style=. .."，创建一个类和你那个类