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

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

---

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

我的想法是简单地使用

边界半径和
背景附件：固定的
如下：


正文{
背景：粉红色；
}
.盒子{
高度：200px；
位置：相对位置；
z指数：0；
}
.box:之前，
.盒子：之后{
内容：“；
位置：绝对位置；
z指数：-1；
宽度：50%；
排名：0；
底部：0；
背景：url(https://picsum.photos/800/600?image=1069)中心/盖固定；
}
.盒子：以前{
左：0；
边框右上角半径：20px；
}
.盒子：之后{
右：0；
边框左上半径：20px；
}
我们的想法是简单地使用
边界半径
和
背景附件：固定
如下：


正文{
背景：粉红色；
}
.盒子{
高度：200px；
位置：相对位置；
z指数：0；
}
.box:之前，
.盒子：之后{
内容：“；
位置：绝对位置；
z指数：-1；
宽度：50%；
排名：0；
底部：0；
背景：url(https://picsum.photos/800/600?image=1069)中心/盖固定；
}
.盒子：以前{
左：0；
边框右上角半径：20px；
}
.盒子：之后{
右：0；
边框左上半径：20px；
}
这里是@Temani解决方案的一个调整，它只使用
背景大小和
背景位置


正文{
背景：粉红色；
}
.盒子{
高度：200px；
位置：相对位置；
}
.box:之前，
.盒子：之后{
内容：“；
位置：绝对位置；
z指数：-1；
宽度：50%；
排名：0；
底部：0；
背景：url(https://picsum.photos/800/600?image=1069);
背景大小：200%；
}
.盒子：以前{
左：0；
边框右上角半径：20px；
背景位置：左中；
}
.盒子：之后{
右：0；
边框左上半径：20px；
背景位置：右中；
}
这里是@Temani解决方案的一个调整，它只使用
背景大小和
背景位置


正文{
背景：粉红色；
}
.盒子{
高度：200px；
位置：相对位置；
}
.box:之前，
.盒子：之后{
内容：“；
位置：绝对位置；
z指数：-1；
宽度：50%；
排名：0；
底部：0；
背景：url(https://picsum.photos/800/600?image=1069);
背景大小：200%；
}
.盒子：以前{
左：0；
边框右上角半径：20px；
背景位置：左中；
}
.盒子：之后{
右：0；
边框左上半径：20px；
背景位置：右中；
}

到目前为止您尝试了什么？
我需要外部的透明度，这样我可以做类似的事情并覆盖图像。
–前端或后端是否缺少一个
而不是
？对不起，弗兰克，我不明白您的回答。你能详细说明一下吗@FrankNocke@LuckyLikey连接div的上角有圆形边框半径，可以使用纯色，但在我需要覆盖图像时非常理想。到目前为止，您做了哪些尝试？
我需要外部透明，以便我可以这样做并覆盖图像。
–前面或结尾缺少
not
？对不起，弗兰克，我我不明白你的回答。你能详细说明一下吗@FrankNocke@LuckyLikey在连接的div的上角有圆形的边界半径，这与纯色很好，但当我需要覆盖图像时非常理想。谢谢Termani，这可能是一个很好的基础。我想我可能会有问题，但我会看看我是否可以解决这个问题。感谢您的帮助。您应该在
：before
和
：：after
中添加类似
z-index:-1
的内容，否则它们将位于div内容的顶部。谢谢Termani，这可能是一个很好的基础。我想我可能会有问题，但我会看看我是否可以解决这个问题。谢谢你的帮助。你应该在
：before
和
：：before
和
：：after
中添加类似
z-index:-1
的内容，否则它们将位于div的内容之上。哦，我怎么没找到这个呢？？：可能是因为你比我聪明。我的头脑很简单@看起来很有前途。我将在明天上午（英国时间）将这一点付诸实践，如果一切顺利，我会给你打勾。非常感谢你，先生@非常感谢您的回复，非常感谢。它肯定90%达到了我想要的效果，但有几个问题我不确定如何处理：首先，使用背景大小：200%意味着我不能使用“封面”来适应内部内容。有什么想法吗？另外，您知道如何渲染背景图像的完整大小而不考虑内容吗。谢谢你的帮助，这比我想象的要复杂得多。我用一种新的方法更新了我的答案，希望能为你解决这个问题。哦，我怎么没找到这个？？：可能是因为你比我聪明。我的头脑很简单@看起来很有前途。我将在明天上午（英国时间）将这一点付诸实践，如果一切顺利，我会给你打勾。非常感谢你，先生@非常感谢您的回复，非常感谢。它肯定90%达到了我想要的效果，但有几个问题我不确定如何处理：首先，使用背景大小：200%意味着我不能使用“封面”来适应内部内容。有什么想法吗？另外，您知道如何渲染背景图像的完整大小而不考虑内容吗。谢谢你的帮助，这比我想象的要复杂得多。我用一种新的方法更新了我的答案，希望能为你解决这个问题。