调整父 div 的大小时，使 css 三角形/箭头增长
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17939571/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a css triangle/arrow grow when its parent div is resized
提问by Elisabeth
This is my css triangle. When the parent container -which has a height percentage setting- is resized then the triangle should resize too.
这是我的 css 三角形。当父容器（具有高度百分比设置）调整大小时，三角形也应调整大小。
How must change the below definition that this could work?
必须如何更改以下定义才能起作用？
If it does not work with common CSS I am also open for CSS3.
如果它不适用于常见的 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
更新
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>
回答by vals
You need to change the way you generate the triangle, as Mr Alien says border is not fluid.
你需要改变生成三角形的方式，因为 Alien 先生说边界不是流动的。
The CSS would be:
CSS 将是：
.triangle {
width: 40%;
height: 40%;
left: 0px;
top: 0px;
background: linear-gradient(to right bottom, black 50%, transparent 50%)
}
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:
更改了演示，以便基本元素具有响应性：
New demo to include your html.
包含您的 html 的新演示。
demo3
演示3
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.
我已将 CSS 添加到最低限度以使其工作：为 body 和 html 添加 100% 高度，为包装器添加宽度。否则，这是您的布局，所以这应该可行。
回答by Serg Hospodarets
My solution:
http://codepen.io/malyw/pen/mhwHo/
Description:
I needed arrows to mark active sidebar menu items.
When I had multiline text in them, arrow was broken.
So mu solution is:
use :afterand :beforeelements with linear-gradientto provide stretched arrows with the same width:
Code:
我的解决方案：
http: //codepen.io/malyw/pen/mhwHo/
描述：
我需要箭头来标记活动的侧边栏菜单项。
当我有多行文本时，箭头坏了。
所以 mu 的解决方案是：
使用:after和:before具有线性渐变的元素来提供具有相同宽度的拉伸箭头：
代码：
&:before {
top: 0px; background: linear-gradient(to right top, $color 50%, transparent 50%);
}
&:after {
top: 50%; background: linear-gradient(to right bottom, $color 50%, transparent 50%);
}
Thanks @vals for idea.
感谢@vals 的想法。
回答by JoseV
This fiddleimplements responsive CSS triangles using just CSS and one element. It shows up, down, left and right pointing triangles and yours is top-left pointing. The responsive down pointing triangle can be easily modified to achieve it:
这个小提琴仅使用 CSS 和一个元素来实现响应式 CSS 三角形。它显示了向上、向下、向左和向右指向的三角形，而你的则是左上角的指向。响应式向下指向三角形可以轻松修改以实现它：
.triangle-top-left {
width: 0;
height: 0;
padding-bottom: 25%;
padding-left: 25%;
overflow: hidden;
}
.triangle-top-left:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -500px;
border-bottom: 500px solid transparent;
border-left: 500px solid #4679BD;
}
For the explanation on the logic used for the responsive triangle see my article on Pure CSS responsive triangles.
有关用于响应式三角形的逻辑的解释，请参阅我关于纯 CSS 响应式三角形的文章。
回答by Imran Bughio
Non Gradient solution to avoid Jagged lines (Fiddle)
避免锯齿状线条的非梯度解决方案（小提琴）
I was looking for something exactly like @Serg Hospodarets answer but I realized that gradient is creating a jagged line, probably a rendering issue of browser. So after some searching and fiddling I made this.
我正在寻找与@Serg Hospodarets 答案完全相同的东西，但我意识到渐变正在创建一条锯齿线，可能是浏览器的渲染问题。所以经过一番搜索和摆弄后，我做了这个。
Summary:I using a spacer techniqueanswered hereby Johan R?nnblom to calculate width relative to height by 1:1 ratio, then I am adding 2 boxes at the edge of div which have 50% of parent element height and width equal to that 50% creating perfect squares, then I am rotating sub element at 45deg creating the diagonal cuts.
总结：我使用Johan R?nnblom在这里回答的间隔技术来计算宽度与高度的比例为 1:1，然后我在 div 的边缘添加 2 个框，它们的父元素高度和宽度的 50% 等于50% 创建完美的正方形，然后我以 45 度旋转子元素创建对角线切割。
Below is the complete code:
下面是完整的代码：
HTML
HTML
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, esse assumenda corporis nemo perspiciatis dolorem vero consectetur asperiores necessitatibus, ea, saepe fugit alias, voluptatum blanditiis quia! Consequatur dolorem, consectetur adipisci.
<div class="u-prop">
<div class="wrap">
<img class="spacer" width="2048" height="2048" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<div class="proportional"></div>
</div>
</div>
<div class="u-prop is--bot">
<div class="wrap">
<img class="spacer" width="2048" height="2048" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<div class="proportional"></div>
</div>
</div>
</div>
SCSS:
社会保障：
body {
padding: 10px;
}
* {
box-sizing: border-box;
}
.box {
padding: 10px;
width: 500px;
position: relative;
background: #eee;
&:before {
content: '';
display: block;
width: 100%;
height: 100%;
border: 1px solid #000;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border-right: solid -0px transparent;
}
}
.u-prop {
position: absolute;
height: 50%;
width: 100%;
top: 0;
left: 100%;
&.is--bot {
top: 50%;
.proportional {
transform: rotate(-45deg);
transform-origin: bottom left;
&:before {
border-bottom: 1px solid #000;
border-top: none;
}
}
}
.spacer {
width: auto;
max-height: 100%;
visibility: hidden;
}
.proportional {
position: absolute;
top: 0;
left: 0px;
width: 150%;
height: 0;
padding-bottom: 100%;
background: #eee;
transform: rotate(45deg);
transform-origin: top left;
&:before {
content: '';
display: block;
width: 100%;
height: 100%;
border-top: 1px solid #000;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
}
}
.wrap {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: auto;
max-width: 100%;
overflow: hidden;
}
}
