css - 网页角的反弧

Question

我知道如何在网络角落制作弧线。对于此弧的右侧部分，)我们可以使用以下代码：

 border-bottom-right-radius: 15px;

对于带有此弧的左侧部分，(我们可以使用以下代码：

 border-bottom-left-radius: 15px;

从而得出这个结果： (_____)

但是你如何在右上角创建一个弧“（”，在左角创建一个“）”。我不能使用 -15px 作为半径。

结果应该是这样的： )_____(

Answer 1

简单的解决方案是将一些具有边框半径和相反背景的子元素附加到父元素：HTML

<div id="test">
    <div class="right_border border"></div>
    <div class="left_border border"></div>
</div>

CSS

#test {
    background:#CCC;
    height:100px;
    width:100px;
    position:relative;
    overflow:hidden
}
div.border {
    position:absolute;
    top:0;
    bottom:0;
    background:#FFF;
    width:50%;
}
.left_border {
    left:-25%;
    border-radius: 50%
}
.right_border {
    right:-25%;
    border-radius: 50%
}

演示：http: //jsfiddle.net/xq3C7/

Answer 2

有一种时髦的方法可以使用 css 渐变来做到这一点。

像这样的东西：

div {
background:
        -webkit-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
        -webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
        -webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}

请参阅此链接：

http://jsfiddle.net/leaverou/EjE7c/light/

和教程：

http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

也有 jQuery 插件，但它们似乎很重。

您也可以使用背景图像来伪造它，但我想这不是您想要的。