＆＃39;倒＆＃39; border-radius可能吗？

Question

当我想要为我的链接制作标签（或标签）时，我正在研究我网站的CSS。我在这个例子中删除了文本，但这基本上是一个导航栏。这是图片：

我的问题是，如果BLACK箭头指向并且看起来像蓝色箭头指向的效果，我将如何获得＆border-radius＆＃39; -ish效果？是否有某个webkit命令可以帮助我，或者我应该将其设为img或者jquery？

非常感谢！（我画了一些漂亮的箭头，对吗？）

Answer 1

不使用原生border-radius。正如MDN "Negative values are invalid"所述。你绝对可以在那里寻找一个能够自动为你完成这个工作的图书馆（尽管我发现Philip建议的图书馆采用的方法特别过时）。

Using pure CSS I have come up with an approach。我们的想法是在容器中添加4个额外元素，并以position方式添加它们，使它们位于元素本身之外。然后我们应用border-radius来产生影响：

＆＃13;

＆＃13;

#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; }

＆＃13;

<div id="main">
    <div class="top left"></div>
    <div class="top right"></div>
    <div class="bottom left"></div>
    <div class="bottom right"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你的元素只有背景颜色，你可以使用伪元素和box-shadow。

伪元素上的hudge box-shadow可以填充元素。 示例：http://codepen.io/gcyrillus/pen/hlAxo，http://codepen.io/gc-nomade/pen/dtnIv，http://codepen.io/gcyrillus/pen/yJfjl。

添加线性渐变，您可以绘制一个类似于您所寻找的可以增长任何高度的框：http://codepen.io/anon/pen/cIxwD。

 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;
}

Answer 3

您可以使用此插件。 http://jquery.malsup.com/corner/（使用jquery）

然后执行以下操作：

 $(this).corner("bite");

需要jQuery和jQuery Corner！