CSS/SVG自定义形状Clip Path右侧定位及翻转解决方案

需求背景 #

需要实现带有特定曲线和45度角的自定义形状容器，要求容器能随内部文本高度自适应增长，同时保持形状的角度与曲线不变。

通过Adobe Illustrator绘制大尺寸自定义形状后，导出SVG路径作为裁剪路径使用：

<clipPath id="clipListing">
<path d="m2776.45,1174.67L2784.45,0H100.2C11.11,0-33.51,107.71,29.49,170.71l1004.12,1004.12,1742.83-.17Z"/>
</clipPath>

利用CSS的clip-path属性将该路径应用到容器，已完成基础形状的实现。

问题与解决 #

需要为第二个元素翻转上述自定义形状，使路径从右上角起始：

• 尝试objectBoundingBox：会改变形状的圆角和角度，不符合需求
• 尝试dir="rtl"：无效果
• 最终有效方案：使用transform: scaleX(-1)实现水平翻转，经测试可正常生效，且不会改变形状的角度与曲线

可运行代码示例 #

<!doctype html>
<html>
    <head>
        <style>
            #ele {
                width: 100%;
                height: 100vh;
                clip-path: url(#clip);
                background: red;
                transform: scaleX(-1);
            }
        </style>
    </head>
    <body>
        <div id="ele"></div>
        <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
            <clipPath id="clip">
                <path d="m2776.45,1174.67L2784.45,0H100.2C11.11,0-33.51,107.71,29.49,170.71l1004.12,1004.12,1742.83-.17Z"/>
            </clipPath>
        </svg>
    </body>
</html>

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