CSS中的透镜形状

我正在尝试用CSS绘制一个具有一定高度和宽度的透镜形状。为了产生连续的曲率,左上角和右下角的边界半径必须为100%,而其他角必须为0%。这就产生了一个45度角的透镜。因为它是在这个角度,我无法单独增加镜头的高度或宽度,而不会使其变形。

我已经尝试过变换,但浏览器总是在缩放之前应用旋转,所以它不起作用。

有没有办法我可以单独改变镜片的高度和宽度?

我已经创建了 JSFiddle 来说明我的意思。 形状1是正确的高度,但没有连续的曲率。 形状2具有连续的曲率,但不是正确的形状。 形状3是我试图纠正这些问题的尝试,但由于应用转换的顺序,它不起作用:

transform: rotate(45deg) scaleY(1.4);