html - 如何使用剪辑路径将图像剪辑/裁剪为所需的形状？

Question

我需要将图像从矩形剪切/裁剪为下面屏幕截图中显示的形状。我在 SVG 图像上使用剪辑路径，但无法裁剪/剪辑为所需的形状。如何使用 剪辑/裁剪所需的形状clip-path？橙色渐变是背景，所以对于这个问题忽略它。下面还显示了代码以及当前输出

HTML

 <div class="space"></div>
    <div class="img-holder"><img class="logo" src="/assets/images/art.svg"></div>
  </div>

CSS

.img-holder {
  height: auto;
  max-width: 50%;
  margin-left: 50px;
  overflow: hidden;

  .logo {
    margin-left: 0px;
    clip-path: polygon(5%);
    border-bottom-right-radius: 50px;
    transform: rotate(10deg);
    
  }
}

电流输出

标签： htmlcssclip-path