创建可以覆盖图像的倒圆角箭头

Question

我正在寻找一种创建反向指针的方法，如上所示。我已经看过一百万种方法来做到这一点，但是它们具有笔直的边缘而不是所需的曲线。

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

Answer 1

想法是像下面这样简单地使用border-radius和background-attachment:fixed：

body {
 background:pink;
}
.box {
  height:200px;
  position:relative;
  z-index:0;
}
.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) center/cover fixed;
}
.box:before {
  left:0;
  border-top-right-radius:20px;
}

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

<div class="box">

</div>

当然，缺点是图像将固定在滚动条上。

Answer 2

这是@Temani仅使用background-size和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>