Question

我试图调整一个三角形，从一个角落到另一个角落覆盖50％的父容器，无论盒子的比例是多少，三角形都可以串起来。

<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的路线是为了阻止线路获得像素化{{ 3}}

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

您需要添加sys.modules并延伸svg preserveAspectRatio="none"

fiddle

使用父容器进行SVG缩放

1 个答案: