时间戳

首页 > 解决方案 > 此帧中的图片，带边框半径

html - 此帧中的图片，带边框半径

问题描述

.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 中运行）没有剪辑路径怎么办？

标签： htmlcss

解决方案

除了clip-path使用之外，我还会添加另一个遮罩层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;
}
<div class="a">

</div>

推荐阅读