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

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 :after and :before elements with linear-gradient to provide stretched arrows with the same width:

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