網頁角落的逆弧

Question

我知道如何在網絡角落製作弧線。對於此弧右側部分)我們可以使用此代碼：

border-bottom-right-radius: 15px; 

，並與此弧(左側部分，我們可以使用此代碼：

border-bottom-left-radius: 15px; 

，從而使這樣的結果：(_____)

但是，你如何在左上角創建一個弧（「右上角」和「）」。我不能使用-15px作爲半徑。

結果應該是這樣的：)_____(

Answer 1

還有就是要做到這一點使用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插件了，只他們似乎相當沉重。

你也可以使用背景圖片來僞造它，但我想那不是你想要的。

Answer 2

簡單的解決方案是附加有圓角半徑和相反的背景父一些子元素： 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% 
} 

DEMO：http://jsfiddle.net/xq3C7/