css - 使用剪辑路径的圆形图像形状

Question

我想要如下图所示的 css 剪辑路径

有人能帮我吗

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/">

标签： csscss-shapesclip-path

Answer 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">