SVG scaling with parent container

Question

I am trying to set up a triangle that will cover 50% of the parent container from corner to corner, regardless of the window ratios being a triangle that can be copied.

<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 installed a fiddle with the code , I try to reproduce the same behavior that I was able to achieve with css, the reason I want to go the svg route is to stop the line from getting pixelation this is the previous css code .

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 to change viewBoxso that the shape of the polygon does not remain proportional?

Answer 1

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

fiddle