特定の高さと幅の CSS でレンズ形状を描画しようとしています。連続的な曲率を生成するには、左上隅と右下隅の境界半径を 100% にし、その他の隅を 0% にする必要があります。これにより、45 度の角度でレンズが生成されます。この角度なので、レンズを歪ませずに高さや幅を個別に大きくすることはできません。
変換を試してみましたが、ブラウザーは常にスケールの前に回転を適用するため、機能しません。
レンズの高さと幅を個別に変更する方法はありますか?
私が言いたいことを説明するためにJSFiddleを作成しました。形状 1 は正しい高さですが、連続的な曲率はありません。形状 2 は曲率が連続していますが、正しい形状ではありません。形状 3 は、これらの問題を修正する試みですが、変換が適用される順序が原因で機能しません。
transform: rotate(45deg) scaleY(1.4);