4

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

图片

4

5 回答 5

9

Lea Verou描述了如何做到这一点：

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

如果不支持 CSS 渐变，它也会退回到纯色背景。它将在 Firefox 3.6、最新的 Webkit 和 - 希望 - Opera 11.10 上运行（他们宣布即将支持渐变）。你也可以添加一个-webkit-gradient()背景，让它在当前使用的几乎所有版本的 Webkit 中工作，但我警告你：这并不容易，我个人拒绝花费超过 5 分钟的时间来搞乱那个非标准的东西。

这是他们实现的现场演示。

于 2012-09-16T15:05:18.817 回答
7

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

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;
}
于 2012-09-16T14:56:02.147 回答
2

如果您不想在 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 小提琴演示。

于 2012-09-16T14:58:05.740 回答
0

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

于 2012-09-16T14:55:47.863 回答
0

CSS3 边框图像属性怎么样？好文章在这里：

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

这将意味着不支持旧浏览器，例如 IE 7-8，但如果您可以忍受它或找到解决方法，这将很有效。

我最近自己用过边框图像来做这件事。

于 2012-09-16T15:38:19.957 回答