БЛОГ НА HUSL


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

Автор вопроса: Alexandr_TT

Я хочу иметь 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="https://picsum.photos/id/1012/800/800">

Свободный перевод вопроса Rounded image shape using clip-path от участника @Suresh R.


Источник

Ответы (4 шт):

Автор решения: Alexandr_TT

Маска легко может это сделать. Было бы сложно получить кривую с 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">

Свободный перевод ответа от участника @Temani Afif.

→ Ссылка
Автор решения: andreymal

Если размеры картинки в пикселях фиксированы, можно использовать clip-path: path(), благо поддерживается всеми современными браузерами (Opera, думаю, подтянется совсем скоро, когда обновит свою версию Blink).

Беда только в том, что clip-path: path() совершенно не адаптивный и задаёт координаты только в пикселях, так что придётся или фиксировать размер картинки в пикселях, или страдать, или ждать появления адаптивного shape() (то есть тоже страдать).

(Фигуру я нарисовал в Inkscape, потом просто скопировал получившийся path из SVG-кода.)

img {
  clip-path: path("M 200 0 A 200 200 0 0 1 0 200 A 200 200 0 0 1 200 400 A 200 200 0 0 0 400 200 A 200 200 0 0 0 200 0 Z");
}
<img src="https://picsum.photos/id/1012/800/800" width="400" height="400" alt="" />

→ Ссылка
Автор решения: Alexandr_TT

Вариант с 4 секторами

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="420" height="420" viewBox="0 0 420 420" version="1.1">
 
    <rect width="100%" height="100%" fill="#111111" />
   <g id="G1" transform="translate(10 -5)" fill="gold" stroke-width="3" stroke="orangered">
  <path d="M299.3 119.6A99.6 100.4 90 0 1 198.8 219.2 99.6 100.4 90 0 1 299.3 318.7 99.6 100.4 90 0 0 399.7 219.2 99.6 100.4 90 0 0 299.3 119.6ZM299.3 318.7" />
  <path d="m299.3 318.7a99.6 100.4 1 0 1-97.9-102.1 99.6 100.4 1 0 1-101.2 98.8 99.6 100.4 1 0 0 97.9 102.1 99.6 100.4 1 0 0 101.2-98.8z" />
  <path d="M98.9 316.6A100.4 99.6 1.2 0 1 201.4 219.2 100.4 99.6 1.2 0 1 103 117.5 100.4 99.6 1.2 0 0 0.5 215 100.4 99.6 1.2 0 0 98.9 316.6Z" />
  <path d="M101.4 119.4A99.6 100.4 0.1 0 1 200.8 220 99.6 100.4 0.1 0 1 300.6 119.7 99.6 100.4 0.1 0 0 201.1 19.1 99.6 100.4 0.1 0 0 101.4 119.4Z" />
   </g> 
        
</svg>

Вариант с 2 секторами + маска + анимация

Каждый раз, разная картинка

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="420" height="420" viewBox="-15 10 420 420" version="1.1">
 <defs>
   <mask id="msk" >
    <rect width="100%" height="100%" fill="red" />
   <g id="G1" fill="white" stroke-width="1" stroke="white">
  <path d="1M299.3 119.6A99.6 100.4 90 0 1 198.8 219.2 99.6 100.4 90 0 1 299.3 318.7 99.6 100.4 90 0 0 399.7 219.2 99.6 100.4 90 0 0 299.3 119.6ZM299.3 318.7" />
  <path d="m299.3 318.7a99.6 100.4 1 0 1-97.9-102.1 99.6 100.4 1 0 1-101.2 98.8 99.6 100.4 1 0 0 97.9 102.1 99.6 100.4 1 0 0 101.2-98.8z" />
  <path d="1M98.9 316.6A100.4 99.6 1.2 0 1 201.4 219.2 100.4 99.6 1.2 0 1 103 117.5 100.4 99.6 1.2 0 0 0.5 215 100.4 99.6 1.2 0 0 98.9 316.6Z" />
  <path d="M101.4 119.4A99.6 100.4 0.1 0 1 200.8 220 99.6 100.4 0.1 0 1 300.6 119.7 99.6 100.4 0.1 0 0 201.1 19.1 99.6 100.4 0.1 0 0 101.4 119.4Z" />
   </g> 
   </mask> 
  <animateTransform
       href="#G1"
       attributeName="transform"
       type="rotate"
       begin="svg1.click"
       dur="8s"
       values="
       0 200 218;
       360 200 218;
       360 200 218;
       0 200 218;
       0 200 218" 
       repeatCount="indefinite"
       restart="whenNotActive" />   
  </defs>   
  
   <image id="img" mask="url(#msk)"  href=" https://placeimg.com/480/480/nature" width="100%" height="100%"/> 
     
</svg>

Вариант с 4 секторами + анимация

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="420" height="420" viewBox="-15 10 420 420" version="1.1">
 <defs>
   <mask id="msk" >
    <rect width="100%" height="100%" fill="red" />
   <g id="G1" fill="white" stroke-width="4" stroke="red">
  <path d="M299.3 119.6A99.6 100.4 90 0 1 198.8 219.2 99.6 100.4 90 0 1 299.3 318.7 99.6 100.4 90 0 0 399.7 219.2 99.6 100.4 90 0 0 299.3 119.6ZM299.3 318.7" />
  <path d="m299.3 318.7a99.6 100.4 1 0 1-97.9-102.1 99.6 100.4 1 0 1-101.2 98.8 99.6 100.4 1 0 0 97.9 102.1 99.6 100.4 1 0 0 101.2-98.8z" />
  <path d="M98.9 316.6A100.4 99.6 1.2 0 1 201.4 219.2 100.4 99.6 1.2 0 1 103 117.5 100.4 99.6 1.2 0 0 0.5 215 100.4 99.6 1.2 0 0 98.9 316.6Z" />
  <path d="M101.4 119.4A99.6 100.4 0.1 0 1 200.8 220 99.6 100.4 0.1 0 1 300.6 119.7 99.6 100.4 0.1 0 0 201.1 19.1 99.6 100.4 0.1 0 0 101.4 119.4Z" />
   </g> 
   </mask> 
  <animateTransform
       href="#G1"
       attributeName="transform"
       type="rotate"
       begin="svg1.click"
       dur="8s"
       values="
       0 200 218;
       360 200 218;
       360 200 218;
       0 200 218" 
       repeatCount="indefinite"
       restart="whenNotActive" />   
  </defs>   
  
   <image id="img" mask="url(#msk)"  href="https://placeimg.com/480/480/nature" width="100%" height="100%"/> 

</svg>

→ Ссылка
Автор решения: darinka poznyak

Можно и без clip-path, но тогда придётся фальш-вырезам задавать такой же цвет, как и основной странице, например, чтобы смотрелось органично

    <style>
    .img {
    width: 300px;
    height: 300px;
    position: relative;
    margin: auto;
    background-image: radial-gradient(circle at 0 100%, white 150px, transparent 10px),
    radial-gradient(circle at 0 0, white 150px, transparent 10px);
    border-radius: 0 50% 50% 0;
    }
    .img:after {
    content: "";
    width: 300px;
    height: 300px;
    background-image: url("https://dynamic-media-cdn.tripadvisor.com/media/photo-o/15/33/fb/43/tanzania.jpg?w=1600&h=900&s=1");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    z-index: -1;
    border-radius: 0 50% 50% 0;
    }
    </style>
    <div class="img"><div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.