这是我的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,为包装器添加了宽度.否则,这是你的布局,所以这应该工作.
