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

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

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

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

Rounded image shape using clip-path

css

css-shapes

clip-path