Make css / arrow triangle when its parent div is changed

Question

This is my css triangle. When the size of the parent container, which has a height percentage setting, is resized, then the triangle must also resize.

How to change the following definition that may work?

If it does not work with general CSS, I am also open to 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

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

Answer 1

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

CSS:

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

demo

You set the size of the triangle as a percentage of the parent that suits you best, then you make the diagonal of the triangle black.

The demo has been changed so that the basic elements respond:

demo2

New demo to enable html.

demo3

I added CSS to a minimum to make it work: added 100% height to the body and html, added width for the wrapper. Otherwise, this is your layout, so this should work.

Answer 2

My decision:
http://codepen.io/malyw/pen/mhwHo/

Description:
I need arrows to mark active sidebar menu items.
When I had multi-line text, the arrow was broken.
So mu solution:
use : after and : before linear gradient elements to provide stretched arrows with the same width:

The code:

 &: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 the idea.

Answer 3

This script implements flexible CSS triangles using only CSS and one element. It shows up, down, left and right index triangles, and yours - at the top left. The sensitive downward pointing triangle can be easily modified to achieve it:

 .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 an explanation of the logic used for a responsive triangle, see my article on Clean Triangles with CSS Support .