居中，响应，缩放CSS3三角形不坚持它下面的div

Question

我已经为CSS3三角形拍摄了代码并对其进行了修改，使其在屏幕调整大小时保持居中以及缩放自身，这是所需的行为。但是，在较宽尺寸的显示器上，三角形与其下方的div之间存在间隙。它下面的三角形和2个div都是页脚的一部分，所以它们需要保持在一起，两者之间没有间隙。请参阅我的jsFiddle和下面的代码。有没有人看到如何修改它，即使在广泛的显示器上，红色三角形总是触及它下面的红色div？如果可能的话，我更喜欢纯CSS解决方案。

JSFiddle link - 扩大结果框架以查看三角形与其下方div之间的差距。

Link to screenshot

HTML：

<footer>
  <div class="triangle"></div>
  <div id = "footer-top"><h1>Footer Heading</h1></div>
  <div id = "footer-bottom"></div>
 </footer>

CSS：

.triangle {
  width: 50%;
  height: 0;
  padding-left:50%;
  padding-bottom: 10%;
  overflow: hidden;
  display:block;
  margin:0px auto;
}

.triangle:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left:-400px;
  border-left: 400px solid transparent;
  border-right: 400px solid transparent;
  border-bottom: 100px solid #FF0000;
}

#footer-top,
#footer-bottom {
  background:#FF0000;
  min-height:200px;
}

#footer-top h1 {
  font-size:30px;
  font-weight:bold;
  color:#FFF;
  text-align:center;
  margin:0px;
  padding-top:10px;
}