我在制作网站的CSS时,想到为我的链接制作选项卡。此示例已将文本删除,但基本上这将是一个导航栏。这里是图片:
我的问题是,我该如何在黑色箭头指向的位置产生类似于border-radius的效果,并且看起来像蓝色箭头指向的效果?是否有某个webkit命令可以帮助我,或者应该将其设置为img或可能是jquery?
非常感谢!(我画了一些漂亮的箭头,对吗?)
![enter image description here](https://istack.dev59.com/5R41j.webp)
非常感谢!(我画了一些漂亮的箭头,对吗?)
没有使用本地的border-radius
。如MDN上所述“负值是无效的”。你肯定可以寻找一个自动为您完成此操作的库(尽管我发现菲利普建议的库采用的方法特别过时)。
使用纯CSS,我想出了一种方法。这个想法是在容器内部添加4个额外的元素,将它们的背景设置为与页面背景相同的颜色(因此,这不会让页面内容在下面过滤-对于这个,您需要SVG遮罩或类似),并以这样的方式position
它们,使得它们恰好位于元素外部。然后我们应用一个border-radius
,它产生的效果是:
#main {
margin: 40px;
height: 100px;
background-color: #004C80;
position: relative;
overflow: hidden;
}
#main div {
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: #FFF;
}
.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }
<div id="main">
<div class="top left"></div>
<div class="top right"></div>
<div class="bottom left"></div>
<div class="bottom right"></div>
</div>
div {
width:800px;
margin:auto;
position:relative;
overflow:hidden;
min-height:2000px;
background:linear-gradient(to bottom,
rgba(255,255,255,0) 0,
rgba(255,255,255,0) 100px,
orange 100px,
orange
);
}
div:before,
div:after
{
content:'';
position:absolute;
top:0;
height:30px;
width:60px;
box-shadow: 0 0 0 500px orange;
border-radius:0 0 0.5em 0;
}
div:after {
right:0;
border-radius: 0 0 0 0.5em;
}
$(this).corner("bite");