在css中创建凹角

Question

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

Answer 1

Lea Verou 描述了如何执行此操作:

通过使用径向渐变,您可以模拟具有负半径的圆角.您可以在没有任何额外元素支持的情况下执行此操作.它有点棘手.

如果不支持CSS渐变,它也会回退到纯色背景.它将适用于Firefox 3.6,最新的Webkit和-hopefully- Opera 11.10(他们宣布渐变支持即将到来).你也可以添加一个-webkit-gradient()背景,使它几乎适用于当前使用的所有Webkit版本,但我警告你:这并不容易,我个人拒绝花费超过5分钟的时间搞乱那个非标准的东西.

这是他们实施的现场演示.

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