我正在尝试使用 CSS 绘制具有一定高度和宽度的透镜形状。为了产生连续曲率，左上角和右下角的边界半径必须为 100%，而其他角的边界半径必须为 0%。这会产生一个 45 度角的镜头。因为它是在这个角度，我不能单独增加镜头的高度或宽度，而不会使它变形。
我已经尝试过转换，但是浏览器总是在缩放之前应用旋转，所以它不起作用。
有没有办法单独改变镜头的高度和宽度？
我创建了一个JSFiddle来说明我的意思。形状 1 是正确的高度，但没有连续的曲率。形状 2 具有连续曲率，但不是正确的形状。形状 3 是我纠正这些问题的尝试，但由于应用转换的顺序，它不起作用：
transform: rotate(45deg) scaleY(1.4);