<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 4 年前。
javascript - 创建可以覆盖图像的倒圆 Angular 箭头
标签 javascript css svg
我正在寻找一种方法来创建如上所示的倒置指针。我见过一百万种方法来做到这一点，但都是直边，而不是我需要的曲线。
它可以用 CSS 完成还是需要像 svg 这样的东西。我需要外部透明，这样我才能做这样的事情并叠加图像。
最佳答案
想法是简单地使用 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>当然，缺点是图片会固定在滚动条上。
关于javascript - 创建可以覆盖图像的倒圆 Angular 箭头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53632485/