SVG scaling with parent container

Question

I'm trying to adjust a triangle that will cover 50% of the parent container from corner to corner, no matter what the ratios of the box are the triangle can be skewered.

<div class="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin meet" viewBox="0,0,100,100">
        <polygon points="100,100 100,0 0,100"/>
    </svg>
</div>


.container {
    height:160px;
    background-color:#ccc;
    margin-top:10px;
}

I've setup a fiddle with the code, I'm trying to replicate the same behaviour that I was able to achieve with css, the reason why I want to go the route of svg is to stop the line from getting pixelation this is the previous code of css.

How to achieve the same result in css

<div class="parent">
    <div class="arrow-right"></div>
</div>

.parent {
    position:relative;
    width:230px;
    height:150px;
    background-color:red;
}
.arrow-right {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    bottom: 0px;
    background: linear-gradient(to left top, #333 50%, transparent 50%);
    opacity: 0.5;
}

How do I change the viewBox to allow for the polygon shape to not stay in proportion?

Answer 1

You need to add preserveAspectRatio="none" and stretch svg svg {width:100%; height:100%}

fiddle