Make a css triangle/arrow grow when its parent div is resized

Question

This is my css triangle. When the parent container -which has a height percentage setting- is resized then the triangle should resize too.

How must change the below definition that this could work?

If it does not work with common CSS I am also open for CSS3.

.segmentTriangle{
    width: 0px;
    height: 0px;
    position: relative;
    left: 0;
    top: 0;
    border-style: solid;
    border-width: 20px 20px 0 0;
    border-color: #000 transparent transparent transparent;
}

UPDATE

That is part of my layout:

<div style="height: 100%;">
    <div style="float: left; height: 100%;" id="triangleWrapper">
        <div style="height: 100%;" class="segmentTriangle"></div>
    </div>
    <div class="fontsize" data-bind="text: replies, style: { height: heightFormatted, background: background }" style="width: 90%;padding-right:20px; height: 100%; text-align: right; float: left;"></div>
</div>

Answer 1

You need to change the way you generate the triangle, as Mr Alien says border is not fluid.

The CSS would be:

.triangle {
    width: 40%;
    height: 40%;
    left: 0px;
    top: 0px;
    background: linear-gradient(to right bottom, black 50%, transparent 50%)
}

demo

You set the triangle dimension to the percentage of the parent that best suits you, then you make the diagonal of the triangle in black.

Changed demo so that base elements are responsive:

demo2

New demo to include your html.

demo3

I have added CSS to a bare minimum to make it work: added 100% height to body & html, added width to wrapper. Otherwise, it's your layout, so this should work.

Answer 2

My solution:
http://codepen.io/malyw/pen/mhwHo/

Description:
I needed arrows to mark active sidebar menu items.
When I had multiline text in them, arrow was broken.
So mu solution is:
use :after and :before elements with linear-gradient to provide stretched arrows with the same width:

Code:

&:before { 
  top: 0px; background: linear-gradient(to right top, $color 50%, transparent 50%);
}

&:after {
  top: 50%; background: linear-gradient(to right bottom, $color 50%, transparent 50%);
}

Thanks @vals for idea.

Answer 3

This fiddle implements responsive CSS triangles using just CSS and one element. It shows up, down, left and right pointing triangles and yours is top-left pointing. The responsive down pointing triangle can be easily modified to achieve it:

.triangle-top-left {
    width: 0;
    height: 0;
    padding-bottom: 25%;
    padding-left: 25%;
    overflow: hidden;
}
.triangle-top-left:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left: -500px;

    border-bottom: 500px solid transparent;
    border-left: 500px solid #4679BD;
}

For the explanation on the logic used for the responsive triangle see my article on Pure CSS responsive triangles.