html - 使用父容器缩放 SVG

Question

我正在尝试调整一个三 Angular 形，从一个 Angular 到另一个 Angular 覆盖父容器的 50%，无论盒子的比例是多少，三 Angular 形都可以串起来。

<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 ，我正在尝试复制我能够使用 css 实现的相同行为，我想走 svg 路线的原因是阻止线条像素化 this is the previous code of css .

如何在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;
}

如何更改 viewBox 以允许多边形形状不保持比例？

Answer 1

您需要添加 preserveAspectRatio="none" 和拉伸(stretch) svg svg {width:100%;高度:100%

fiddle