CSS中的透镜形状

Question

我正在尝试绘制具有特定高度和宽度的CSS的透镜形状。为了产生连续曲率，左上角和右下角的边界半径必须为100％，其他角为0％。这产生45度角的镜头。因为它处于这个角度，所以我无法单独增加镜头的高度或宽度，也不会扭曲它。

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

有没有一种方法可以单独更改镜头的高度和宽度？我已经创建了JSFiddle来说明我的意思。 形状1是正确的高度，但没有连续的曲率。 形状2具有连续的曲率，但不是正确的形状。 形状3是我在纠正这些问题的尝试，但是不会因为其中被应用变换的顺序工作：

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

Answer 1

你可以简单地前后翻页的属性来决定以何种顺序它们的应用：

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

Updated JSFiddle。