在css中创建凹角

Question

可以在css中创建这样的凹角吗？如果是的话，你会怎么做？

Answer 1

Lea Verou有description of how to do this：

  

通过使用径向渐变，您可以使用a来模拟圆角   负半径。你可以在没有额外支持的情况下做到这一点   元素。它有点棘手。

     

如果是CSS渐变，它也会回归到纯色背景   不支持。它适用于Firefox 3.6，最新的Webkit和    - 希望 - Opera 11.10（他们宣布渐变支持是   未来）。您也可以添加-webkit-gradient()背景   它几乎适用于当前使用的所有Webkit版本，但我   警告你：这并不容易，我个人拒绝花钱   我超过5分钟的时间搞乱这种不合标准的东西。

Here 是他们实施的实时演示。

Answer 2

以下是我将如何解决这个问题的一个很好的例子：

http://jsfiddle.net/x4wLf/

HTML：

<div class='concave'>
    <div class='topleftconcave'></div>
    <div class='botleftconcave'></div>
</div>

CSS：

 div.concave {
    background:blue;
    width:150px;
    height:120px;
    position:relative;
}
div.topleftconcave {
    position:absolute;
    background:white;
    width:25px;
    height:35px;
    border-bottom-right-radius:500px;
}
div.botleftconcave {
    position:absolute;
    background:white;
    width:25px;
    height:35px;
    bottom:0;
    left:0;
    border-top-right-radius:500px;
} 

Answer 3

如果你不想在HTML中添加额外的元素，只需要设置两个角的样式和就可以使用生成的内容，我建议：

.concave {
    position: relative;
    width: 10em;
    height: 3em;
    line-height: 3em;
    margin: 1em auto;
    padding: 0.5em;
    background-color: #00f;
    color: #fff;
}

.concave::before {
    content: '';
    position: absolute;
    top: -1em;
    left: -1em;
    border: 1em solid #fff;
    border-radius: 1em;
}

.concave::after {
    content: '';
    position: absolute;
    bottom: -1em;
    left: -1em;
    border: 1em solid #fff;
    border-radius: 1em;
}
​

JS Fiddle demo

Answer 4

我知道的唯一方法是在四个角添加四个div，每个div都有一个正边框半径。

Answer 5

CSS3 border-image属性怎么样？很棒的文章：

http://css-tricks.com/understanding-border-image/

这意味着不支持IE 7-8等旧浏览器，但是如果您能够接受它或找到解决方法，那么这将很有效。

我最近使用border-image来完成这件事。