0

I need to clip/crop an image from a rectangle shape to a shape shown in the screenshot below. I am using clip-path on an SVG image, but am unable to crop/clip in the desired shape. How can I clip/crop in the desired shape using clip-path? The orange gradient is a background so ignore that for this question. Code also shown below along with the current output

enter image description here

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);
    
  }
}

Current output

enter image description here

Ian Bell
  • 533
  • 5
  • 18
  • Does this help? [link]https://stackoverflow.com/questions/31765345/how-to-round-out-corners-when-using-css-clip-path particularly the answer from @TemaniAfif – A Haworth Jun 23 '21 at 07:55
  • you can use a `border-top-left-radius` and a `border-bottom-right-radius` and `transform:skew(10deg,10deg);` for example instead of clip path – GucciBananaKing99 Jun 23 '21 at 08:35

0 Answers0