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