如何让CSS SVG Clip Path从Div左下角开始定位？

我给Div应用SVG Clip Path，目的是在左侧添加固定斜角。SVG尺寸设得偏大是为了适配不同高度的Div，但目前剪切路径从Div顶部开始定位，导致侧边被裁切。能不能将剪切路径设置为从Div左下角开始，让斜角始终从这个位置起始？

当前代码 #

HTML #

<div class="box"></div>

<svg width="0" height="0">
    <defs>
        <clipPath id="sideimgclip" transform="translate(0 0)">
            <polygon class="a" points="0 686.89 396.58 0 1200 0 1200 686.89 0 686.89"/>
        </clipPath>
    </defs>
    <g class="b"><polygon class="c" points="1200 686.89 0 686.89 0 0 1200 0 1200 686.89"/></g>
</svg>

CSS #

.box{ width:650px; height:450px; background:#c00; 
        -webkit-clip-path: url(#sideimgclip);
        clip-path: url(#sideimgclip);
}

解决方案 #

要实现斜角始终从Div左下角起始，核心是用相对比例坐标替代绝对像素坐标，并开启clipPathUnits="objectBoundingBox"让路径自适应元素尺寸，具体修改如下：

修改后的代码 #

HTML

<div class="box"></div>

<svg width="0" height="0">
    <defs>
        <!-- 开启objectBoundingBox让路径基于元素边界盒比例计算 -->
        <clipPath id="sideimgclip" clipPathUnits="objectBoundingBox">
            <!-- 坐标说明：
                 0 1 = Div左下角
                 0.3 0 = 左上角向右偏移30%宽度的位置（可调整斜角角度）
                 1 0 = Div右上角
                 1 1 = Div右下角
                 0 1 = 回到左下角闭合路径
            -->
            <polygon points="0 1, 0.3 0, 1 0, 1 1, 0 1" />
        </clipPath>
    </defs>
</svg>

CSS

.box {
    width: 650px;
    height: 450px;
    background: #c00;
    -webkit-clip-path: url(#sideimgclip);
    clip-path: url(#sideimgclip);
}

关键说明 #

• clipPathUnits="objectBoundingBox"：这个属性让剪切路径的坐标不再是绝对像素，而是基于目标元素的宽高比例（0对应元素最小边，1对应最大边），完美适配不同尺寸的Div。
• 调整多边形坐标：把原来的绝对像素点换成相对比例点，锚定0 1（左下角）作为斜角的起点，通过修改0.3这个值可以调整斜角的陡峭程度——数值越大，斜角越平缓；数值越小，斜角越尖锐。

内容的提问来源于stack exchange，提问作者mmc501