css - 调整其父 div 大小时使 css 三 Angular 形/箭头增长

Question

这是我的 css 三 Angular 形。调整具有高度百分比设置的父容器大小时，三 Angular 形也应调整大小。

必须如何更改以下定义才能起作用？

如果它不适用于常见的 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>

Answer 1

您需要更改生成三 Angular 形的方式，因为 Alien 先生说边界不流畅。

CSS 将是:

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

demo

您将三 Angular 形尺寸设置为最适合您的父项的百分比，然后将三 Angular 形的对 Angular 线设为黑色。

更改了演示，使基本元素响应:

demo2

包含您的 html 的新演示。

demo3

我已将 CSS 添加到最低限度以使其正常工作:将 100% 高度添加到正文和 html，将宽度添加到包装器。否则，这是您的布局，所以这应该有效。