Center triangle at bottom of div full width responsively

Question

After hours of trying in CSS (sorry, I'm still a CSS noob) I am asking you for help:
I want a triangle to be the "bottom" of a div while filling the whole screen width, no matter what size the screen is (100%).
When the window resizes I just want the triangle to change it's width so that it still fills the whole screen width (100%) but not it's height.
At the moment the whole thing looks like this (triangle colored black only for demonstration purposes) which judging by the looks is what I want to achieve:

My code looks like this:

.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>

Code on JSFiddle: http://jsfiddle.net/L8372wcs/

My problems:

• I can't figure out how to make the triangle take 100% of the screen size (I'm using a width in pixels at the moment).
• I can't figure out how to make the triangle stick to the exact bottom of the div (here I'm also using a pixel value at the moment).
• I can neither figure out how to resize the triangle responsively nor how to maintain it's height while doing so (I tried serveral tutorials).

Thanks a lot in advance for the help.

Answer 1

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

---

CSS (Relevant changes)

.top {
    ...
    position: relative;
}

.triangle {

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

1. The left and right borders are defined with viewport units (since your div is 100% wide). The triangle is responsive (try to resize the viewport)

2. The triangle position is defined with bottom: -40px; (instead of top) and its parent has position: relative; This will ensure that the triangle will be positioned always just below the green element (until the top border of the triangle is 40px tall)

---

Result

Answer 2

Another approach would be to use an inline svg with the polygon element.

This way, it's width can be set to 100% and it's height can be controled independently with CSS thx to the preserveAspectRatio svg attribute.

In the following example, the height of the triangle is fixed to 40px but you can make the height rezise according the width by removing the CSS height property and the preserveAspectRatio attribute.

.top {
    position:relative;
    background-color: green;
    height: 100px;
    width: 100%;
}
.bottom {
    background-color: red;
    height: 200px;
    width: 100%;
}
.triangle {
    position:absolute;
    top:100%;
    width:100%;
    height:40px;
}

<div class="top">
    <svg viewbox="0 0 100 10" preserveAspectRatio="none" class="triangle" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <polygon points="0 0 100 0 50 10"/>
    </svg>
</div>
<div class="bottom"></div>

You can also style the triangle (fill colors, border, opacity...) as derired either with CSS or with attributes in the SVG element. Here is an example with CSS :

.top {
  position: relative;
  background-color: green;
  height: 100px;
  width: 100%;
}
.bottom {
  background-color: red;
  height: 200px;
  width: 100%;
}
.triangle {
  position: absolute;
  top: 100%;
  width: 100%;
  height: 40px;
  fill: gold;
}

<div class="top">
  <svg class="triangle" viewbox="0 0 100 10" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polygon points="0 0 100 0 50 10" />
  </svg>
</div>
<div class="bottom"></div>