css - 网页 Angular 的反弧

Question

我知道如何在网络 Angular 落制作弧线。对于带有此圆弧 ) 的右侧部分，我们可以使用此代码:

 border-bottom-right-radius: 15px;

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

 border-bottom-left-radius: 15px;

从而得到这个结果:(_____)

但是你如何在右 Angular 制作弧线“(”，在左 Angular 制作弧线“)”。我不能使用 -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/