javascript - 创建可以叠加图像的倒圆角箭头

Question

我正在寻找一种方法来创建如上所示的倒置指针。我已经看到了一百万种方法可以做到这一点，但使用的是直边而不是我需要的曲线。

它可以用 CSS 完成还是需要像 svg 之类的东西。我需要外部透明，这样我就可以做这样的事情并覆盖图像。

标签： javascriptcsssvg

Answer 1

这是对@Temani 解决方案的一个调整，它只使用background-sizeand background-position。

body {
 background:pink;
}
.box {
  height:200px;
  position:relative;
}
.box:before,
.box:after{
   content:"";
   position:absolute;
   z-index:-1;
   width:50%;
   top:0;
   bottom:0;
   background:url(https://picsum.photos/800/600?image=1069);
   background-size: 200%;
}
.box:before {
  left:0;
  border-top-right-radius:20px;
  background-position: left center;
}

.box:after {
  right:0;
  border-top-left-radius:20px;
  background-position: right center;
}

<div class="box">

</div>

如果你想走 SVG 路线，你可以这样做：

body {
 background:pink;
}
.box {
  height: 200px;
}

<div class="box">

  <svg width="100%" height="100%">
    <defs>
      <path id="notch" d="M -20,0 A 20,20 0 0 1 0,20 A 20,20 0 0 1 20,0 Z" fill="black"/>
      <mask id="notchMask">
        <rect width="100%" height="100%" fill="white"/>
        <use xlink:href="#notch" x="50%"/>
      </mask>
    </defs>
    <image xlink:href="https://picsum.photos/800/600?image=1069"
           width="100%" height="100%" preserveAspectRatio="xMidYMid slice"
           mask="url(#notchMask)"/>
  </svg>

</div>

更新：

以前的 CSS 方法对于长内容会失败。这是一个新版本，希望适用于任何大小的内容。它需要添加几个额外的<div>元素。

它的工作方式与以前类似，有两个半角元素。但是在每一半中，我们都嵌入了一个全角::before元素。这样，背景图像可以设置为cover. 我们只需要确保，对于右手边，我们使用right:0的元素与背景图像是右对齐的。这意味着我们可以看到图像的两半。

body {
 background: pink;
}
.box {
  height: 1200px;  /* Simulate long content */
  position: relative;
}
.half {
  position: absolute;
  width: 50%;
  top: 0;
  bottom: 0;
  border-top-right-radius: 20px;
  overflow: hidden;
}
.half::before {
  content: "";
  position: absolute;
  width: 200%;
  left: 0;
  top: 0;
  bottom: 0;
  background: url(https://picsum.photos/800/600?image=1069);
  background-size: cover;
}

.half:nth-child(2) {
  right: 0;
  border-top-left-radius:20px;
}
.half:nth-child(2)::before {
  left: auto;
  right: 0;
}

<div class="box">
  <div class="half"></div>
  <div class="half"></div>

</div>