当它的父div调整大小时，使css三角形/箭头增长 [英] Make a css triangle/arrow grow when its parent div is resized

问题描述

这是我的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 =fontsizedata-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（到右下角，黑色50％，透明50％）
} 
  

b $ b

演示

您将三角形尺寸设置为

更改演示，使基本元素具有响应性：

demo2

新演示包含您的html。

demo3

我已经添加CSS到一个最低限度，使其工作：添加100％高度身体& html，添加宽度到包装器。否则，它是你的布局，所以这应该工作。

This is my css triangle. When the parent container -which has a height percentage setting- is resized then the triangle should resize too.

How must change the below definition that this could work?

If it does not work with common CSS I am also open for 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

That is part of my layout:

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

解决方案

You need to change the way you generate the triangle, as Mr Alien says border is not fluid.

The CSS would be:

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

demo

You set the triangle dimension to the percentage of the parent that best suits you, then you make the diagonal of the triangle in black.

Changed demo so that base elements are responsive:

demo2

New demo to include your html.

demo3

I have added CSS to a bare minimum to make it work: added 100% height to body & html, added width to wrapper. Otherwise, it's your layout, so this should work.

这篇关于当它的父div调整大小时，使css三角形/箭头增长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！