这是我的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;
}
UPDATE
这是我布局的一部分：
<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>
解决方法
您需要改变生成三角形的方式,因为Alien先生说边界不流畅.
CSS将是：
.triangle {
width: 40%;
height: 40%;
left: 0px;
top: 0px;
background: linear-gradient(to right bottom,black 50%,transparent 50%)
}
您将三角形尺寸设置为最适合您的父级的百分比,然后将三角形的对角线设置为黑色.
更改了演示,以便基本元素响应：
包含你的HTML的新演示.
我已经将CSS添加到最低限度以使其工作：将100％的高度添加到body& html,为包装器添加了宽度.否则,这是你的布局,所以这应该工作.
