CODEWITHSUNDEEP
javascriptcss
dev
dev

Reputation: 926

How to remove some portion of an image

I am trying to build a component, where it takes images and the first image will be shown while remaining images will be shown in a half circle.

Here I am trying to clip the image portion from second image by adding a class which is not working. I need to get the images as shown in the attached image below.

Images.js

const Images = ({ images = [] }) => {
  return (
    <div>
      {images?.map((image, index) => {
        const isFirst = index === 0;
        return (
          <img
            src={image.url}
            alt={image.title}
            key={image.title}
            className={isFirst ? "" : "semi-circle"}
          />
        );
      })}
    </div>
  );
};

export default Images;

style.css

img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

.semi-circle {
  clip: rect(0px, 25px, 25px, 0px);
}

What am I doing wrong here.

Sandbox

See the image that illustrates what I'm trying to achieve:

this

Upvotes: 1

Views: 300

Answers (1)

Arul Prabakaran
Arul Prabakaran

Reputation: 135

You can use clip-path: path() to create custom shapes. This is now supported in modern browsers.

.semi-circle {
    clip-path: path('m27.215 9.6962c70.511-13.195 81.235 89.479 4.948 82.882 16.494-5.773 43.709-54.43-4.948-82.882z');
}

Updated Sandbox

Clip-path Caniuse.com

Upvotes: 1

Related Questions