Это мой треугольник CSS. При изменении размера родительского контейнера, для которого задан процент высоты, треугольник также должен изменить размер.

Как изменить приведенное ниже определение, чтобы это могло работать?

Если он не работает с обычным CSS, я также открыт для 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;
}

ОБНОВИТЬ

Это часть моего макета:

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