css - 百分比填充顶部导致底部出现白色间隙

Question

我想在我的 div 上创建一个斜坡形状。该解决方案由主 div（带内容）和顶部 tiv（三角形）组成。对于顶部 div，我指定了正确的背景、剪辑路径属性和百分比填充顶部（用于不同宽度的固定比率）。当以像素为单位的最终形状高度具有小数时，问题是百分比填充。形状底部有额外的空白区域。如何消除/填充这个空白？

三角形 div css 道具

background: gray;
clip-path: polygon(0 0, 100% 100%, 0 100%);
padding-top: 15%;
margin-bottom: 0;

我不是在寻找解决方法。我想保留两个元素并在矩形元素上指定剪辑路径对我不起作用。我正在寻找如何在百分比计算后舍入最终高度的答案。

重现https://jsfiddle.net/vt5pr6a1/6/ 调整结果大小以查看问题

标签： css

Answer 1

让它只有一个元素

.footer {
  background: gray;
  /*                         v-- added an extra point using 15%xsreen width */
  clip-path: polygon(0 0, 100% 15vw, 100% 100%, 0 100%);
  padding-top: 15%;
  margin-bottom: 0;
}

body  {
  margin:0;
}

<div class="footer">
  foter content<br>
  here
</div>