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。