Responsive width css triangle with gradient

I'm trying to build a triangle with a gradient that is 100% width of it's parent. The parent element will be in a row of three columns and will be responsive. I did the the gradient part by making a solid color triangle and putting a transparent gradient over the top of it. The problem is that with this method I need to put a specific number for the width of the triangle. This is the method I'm using for the triangle

width: 0;
height: 0;
border-style: solid;
border-width: 0 0 40px 300px;
border-color: transparent transparent red transparent;

I have not been able to find a way to make the triangle be 100% width of the parent container.

The end goal will be that the triangle will have a variant height, depending on which product is being looked at, but will always be 100% width of the parent container. This is an example of what my set up is like so far.

http://ift.tt/1SYKyi3