Este es mi css triangle. Cuando el contenedor principal, que tiene una configuración de porcentaje de altura, cambia de tamaño, el triángulo también debería cambiar de tamaño.

¿Cómo debe cambiar la siguiente definición de que esto podría funcionar?

Si no funciona con CSS común, también estoy abierto para 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;
}

ACTUALIZAR

Eso es parte de mi diseño:

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