中心三角形在div全宽的底部响应

Question

经过几个小时的CSS尝试(对不起,我还是一个CSS菜鸟)我请求你帮忙:
我想要一个三角形作为div的"底部",同时填满整个屏幕宽度,无论屏幕尺寸大小是(100%).
当窗口调整大小时我只想让三角形改变它的宽度,这样它仍然可以填满整个屏幕宽度(100%)但不是它的高度.
目前,整个事情看起来像这样(三角形黑色仅用于演示目的),从外观判断是我想要实现的:

我的代码看起来像这样:

.top {
  background-color: green;
  height: 100px;
  width: 100%;
}
.bottom {
  background-color: red;
  height: 200px;
  width: 100%;
}
.triangle {
  border-top: 40px solid black;
  border-left: 950px solid transparent;
  border-right: 950px solid transparent;
  width: 0;
  height: 0;
  top: 107px;
  content: "";
  display: block;
  position: absolute;
  overflow: hidden;
  left: 0;
  right: 0;
  margin: auto;
}

<div class="top">
  <div class="triangle"></div>
</div>
<div class="bottom"></div>

关于JSFiddle的代码:http://jsfiddle.net/L8372wcs/

我的问题:

• 我无法弄清楚如何使三角形占据屏幕尺寸的100%(我现在使用的是像素宽度).
• 我无法弄清楚如何使三角形粘在div的确切底部(这里我现在也使用像素值).
• 我既不知道如何响应三角形的大小,也不知道如何保持它的高度(我尝试了几个教程).

非常感谢您的帮助.

Answer 1

见http://jsfiddle.net/L8372wcs/1/

CSS(相关变更)

.top {
    ...
    position: relative;
}

.triangle {

    border-top: 40px solid black;
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    ...
    bottom: -40px;
}

1. 左边框和右边框用视口单元定义(因为你的div是100%宽).三角形是响应的(尝试调整视口大小)

2. 三角形位置由bottom: -40px;(而不是顶部)定义,其父级具有position: relative;此功能.这将确保三角形始终位于绿色元素下方(直到三角形的顶部边框40px很高)

结果