我使用绝对位置技术在每个部分的底部创建一个响应点。
当浏览器宽度相对较小时，这很好，但当宽度扩展时，绝对定位的div最终会与部分内容重叠。
要确保节内容始终直接显示在提示下方，并且不会随着宽度的扩展而重叠，最佳方法是什么？
body {
overflow-x: hidden;
overflow-y: visible;
margin:0;
padding:0;
font-family: Arial;
font-size:18px;
}
section {
width:100%;
background:#fff;
color:#000033;
padding:80px 0 60px 0;
margin:auto;
text-align: center;
}
section.inverse {
background:#003366;
color:#fff;
}
section .container {
max-width:800px;
margin:auto;
padding:0 20px;
}
.tip {
background: #003366;
width: 100%;
transform: translate(-50%, -50%);
margin:0 50% 0 50%;
}
.tip:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
padding-bottom: 10%;
background: #003366;
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
clear:both;
}
.tip.white, .tip.white:after {
background:#fff !important;}<section class="inverse">
<div class="container">
<b>LOREM IPSUM.</b>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<div class="tip"></div>
<section>
<div class="container">
<b>LOREM IPSUM.</b>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<div class="tip white"></div>
<section class="inverse">
<div class="container">
<b>LOREM IPSUM.</b>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
1条答案
按热度按时间k7fdbhmy1#
您的问题本质上源于这样一个事实，即您没有定义高度，并且点形状是绝对定位的。这样一来，在媒体查询中总是会有重叠的风险，并可能会有一堆填充调整。
相反，需要有一些定义的点形状的高度，使得在常规流中，它实际上向下撞击正在进行的内容。如何定义相对高度，可以有很多种方式。下面是我的代码。
在任何情况下，我个人会探索使用SVG三角形来呈现尖的形状，而不是使用仍然具有weak browser support的clip-path（尽管您使用的是它的基本形式）。像您所做的那样使用pseudo，可以提供一些DRY效率，但是SVG确实可以引用单个存储的SVG形状并重复多次。你可以有无限的形状，像粗糙的边缘或画笔边缘。
SVG三角形示例：
修复代码（仍使用clip-path形状）：
参见Codepen