CSS3 clip-path - 添加轮廓和鹅卵石形状？

Question

如何使用轮廓剪裁图像？

我正在使用here的指南。

的CSS：

clip-polygon {
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
  border: 10px solid red;
}

HTML：

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="" class="clip-polygon">

结果：

边框/轮廓根本不符合剪裁形状。

可以实现吗？

另外，如何剪切像鹅卵石一样弯曲，如：