Decrease height of Triangle made using CSS3 - html

Question

I'm trying to decrease the height of the triangle made using css to fill in the div "box"
here is the fiddle http://jsfiddle.net/6rp7F/
.triangle-down{
width: 50%;
height: 0;
padding-left: 50%;
padding-top: 50%;
overflow: hidden; }
.triangle-down div {
width: 0;
height: -600px;
margin-left:-500px;
margin-top:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 500px solid #039dd4;
}
here is what i'm expecting to achieve:

Answer 1

Maybe setting border-top to 200px will help you. If not the actual value, you at least see which parameter to tweak.
Updated fiddle (with change made):
http://jsfiddle.net/6rp7F/6/

Answer 2

.triangle-down{
width: 50%;
height: 0;
padding-left: 50%;
padding-top: 50%;
overflow: hidden; }
.triangle-down div {
width: 0;
height: -600px;
margin-left:-500px;
margin-top:-500px;
border-left: 1200px solid transparent;
border-right: 1200px solid transparent;
border-top: 500px solid #039dd4;
This goes off-screen but works!
If you are willing to reduce the overall sizes, then you can see it just as well in that tiny screen but the concept remains the same
See here working perfectly! (I reduced everything by a factor of 10 just to demonstrate that it works)

Answer 3

Changing the margin-top will decrease the height, but will also shrink the triangle. You have to also adjust margin-left, margin-right, padding-left, and padding-right to keep its width the same.
Here is an updated Fiddle

Answer 4

No sure why you need the extra div when this can be done with a pseudo element
JSfiddle Demo
HTML
<div class="triangle-down"></div>
CSS
.triangle-down{
height:1px;
position: relative;
}
.triangle-down:after {
position: absolute;
content:"";
width:0;
height:0;
/* separate out so you can see various properties*/
/* the height of the arrow is dtermined by the top and bottom border widths */
border-width: 200px 500px 200px 500px;
border-style:solid;
border-color:red transparent transparent transparent;
}

Answer 5

You can modify your CSS applied to the div as such:
.triangle-down div {
width: 0px;
margin-left: -300px;
margin-top: -350px;
border-left: 250px solid transparent;
border-right: 250px solid transparent;
border-top: 125px solid #039DD4;
}
You can see this: http://jsfiddle.net/zs6sY/
Hope this helps!!!