Блог

Главная - Вопросы по программированию - Округленная форма изображения с использованием clip-path

Округленная форма изображения с использованием clip-path

#css #css-shapes #clip-path

#css #css-фигуры #clip-path

Вопрос:

Я хочу иметь css clip-path, как показано на рисунке ниже

кто-нибудь может мне помочь

введите описание изображения здесь

 img {
  clip-path: polygon(53% 0%, 100% 1%, 100% 50%, 100% 100%, 55% 100%, 42% 65%, 0% 52%, 44% 36%);
  border-radius:0 100% 100% 0
} 
 <img src="http://lorempixel.com/400/400/">

Ответ №1:

mask можно легко это сделать. Было бы сложно иметь кривую с clip-path 

 img {
  width:50%;
  border-radius:50%;
  -webkit-mask:
    radial-gradient(circle at top    left,transparent 45%,#fff 45.5%) top,
    radial-gradient(circle at bottom left,transparent 45%,#fff 45.5%) bottom;
  -webkit-mask-size:100% 50%;
  -webkit-mask-repeat:no-repeat;
  
} 
 <img src="https://picsum.photos/id/1012/800/800">

Другой синтаксис:

 img {
  width:50%;
  border-radius:50%;
  -webkit-mask:
    radial-gradient(51% 51% at 0 0   ,transparent 99%,#fff),
    radial-gradient(51% 51% at 0 100%,transparent 99%,#fff);
  -webkit-mask-composite: destination-in;
  mask-composite:intersect;
} 
 <img src="https://picsum.photos/id/1012/800/800">

Комментарии:

1. Привет, Темани Афиф, большое спасибо, это именно то, что я искал

2. Однако, если я использую другое разрешение изображения, фигура растягивается. используйте изображение ниже и посмотрите, пожалуйста digital-photo-secrets.com/images /…

3. @SureshR потому что вам нужна квадратная форма, чтобы изображение было квадратным, иначе у вас не может быть того, что вы показываете

4. Извините, что беспокою вас больше @Temani Afif. Почему на левой стороне фигуры есть граница. есть ли какой-нибудь способ управлять этим?

5. @SureshR вы можете показать мне скриншот, я не вижу этой границы