参见英文答案 >
Invert rounded corner in CSS?10个
当我想到为我的链接制作标签(或标签)时,我正在研究我网站的CSS.我在这个例子中删除了文本,但这基本上是一个导航栏.这是图片：
当我想到为我的链接制作标签(或标签)时,我正在研究我网站的CSS.我在这个例子中删除了文本,但这基本上是一个导航栏.这是图片：
我的问题是,如何在BLACK箭头指向并且看起来像蓝色箭头指向的效果时获得’border-radius’-ish效果？是否有某个webkit命令可以帮助我,或者我应该将其设为img或jquery？
万分感谢！(我画了一些漂亮的箭头,对吧？)
解决方法
不使用原生border-radius.正如在MDN
“Negative values are invalid”上提到的那样.你肯定可以在那里寻找一个自动执行此操作的库(尽管我发现Philip建议的库中采用的方法特别过时).
Using pure CSS I have come up with an approach.想法是在容器内添加4个额外元素,并将它们放置在元素本身之外.然后我们应用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>
