css – ‘倒置’边界半径可能吗？

参见英文答案 > Invert rounded corner in CSS?10个
当我想到为我的链接制作标签(或标签)时,我正在研究我网站的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>

原文地址：https://www.jb51.cc/css/215283.html