此边框中带有边框半径的图片

Question

.a { clip-path: polygon(10% 0, 100% 0%, 100% 100%, 10% 100%,10% 60%, 0% 50%, 10% 40%); }       
.a { position: relative; width: 500px; height: 500px; background:url("https://cdn.pixabay.com/photo/2020/02/16/07/55/thailand-4852830_960_720.jpg"); border-radius: 15px;

<div class="a"></div>

我只能做2个边界。 但我想要这样的4个边界。

它可以在IE9上运行（我知道剪辑路径不能在IE9中运行） 没有剪辑路径怎么办？

Answer 1

除了使用clip-path的{​​{1}}之外，我还将添加另一个遮罩层

mask

.a {
  --w: 30px; /*wdith of arrow*/
  --r: 25px; /*radius*/
  

  width: 500px;
  height: 200px;
  background: url("https://cdn.pixabay.com/photo/2020/02/16/07/55/thailand-4852830_960_720.jpg");
  border-radius: var(--r); /* Remove this if you want to keep only the left radius */
  padding-left:var(--w);
  clip-path: polygon(var(--w) 0, 100% 0%, 100% 100%, var(--w) 100%, var(--w) 60%, 0% 50%, var(--w) 40%);
   /* From chrome and webkit browser */
  -webkit-mask:
    linear-gradient(#fff,#fff),
    radial-gradient(farthest-side at bottom right,transparent 98%,#fff 100%) top    left/var(--r) var(--r) content-box content-box,
    radial-gradient(farthest-side at top    right,transparent 98%,#fff 100%) bottom left/var(--r) var(--r) content-box content-box;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite:source-out,source-over;
  /* For firefox and browsers that implement the new mask Specification*/
  mask:
    radial-gradient(farthest-side at bottom right,transparent 98%,#fff 100%) top    left/var(--r) var(--r) content-box content-box,
    radial-gradient(farthest-side at top    right,transparent 98%,#fff 100%) bottom left/var(--r) var(--r) content-box content-box,
    linear-gradient(#fff,#fff);
  mask-repeat:no-repeat;
  mask-composite:exclude;
}