如何根据所附屏幕截图实现图像的机翼式弯曲形状

Question

在此输入图片描述

如何使用 css 根据所附屏幕截图实现图像的机翼样式弯曲形状

尝试使用CSS边框半径和剪辑路径CSS生成器，我们无法实现图像所需的曲线形状

Answer 1

您可以使用

clip-path: ellipse()

剪切曲线，然后通过仅将

border-radius

应用于这些角来在右侧添加圆角：

img { 
  display: block;
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
  clip-path: ellipse(100% 120% at 100% 0%);
}

<img src="https://placehold.co/578x559">