Make a css triangle/arrow grow when its parent div is resized

Question

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

Answer 1

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.