如何部分覆蓋圓的三分之一圓？

Question

我想要一個在下半部分有背景的標籤的圖片圈。我覺得我發表的jsfiddle這樣你能明白我想：http://jsfiddle.net/Lf65Z/

所以這是我的CSS：

#container { 
    position: absolute; 
    top: 50px; 
    left: 50px; 
    width: 400px; 
    height: 400px; 
    background: red; 
    border: 1px solid #999; 
    border-radius: 1000px; 
} 

#labelbackground { 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    width: 400px; 
    height: 200px; 
    background: rgba(165, 165, 165, 0.62); 
    border-bottom-left-radius: 1000px; 
    border-bottom-right-radius: 1000px; 
} 

這讓我對圓的50％的背景。但我想覆蓋只類似圓的33％，是這樣的：http://jsfiddle.net/Lf65Z/1/

#labelbackground { 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    width: 400px; 
    height: 150px; 
    background: rgba(165, 165, 165, 0.62); 
    border-bottom-left-radius: 1000px; 
    border-bottom-right-radius: 1000px; 
} 

但你可以看到它不是真正做我想要什麼？是否有剛剛切斷任何可能性50％的背景，以便它保持正確的邊界半徑？

Answer 1

只需在容器中添加overflow: hidden;即可。在這裏看到：http://jsfiddle.net/deVRd/

編輯： 的情況下，與滑塊你可以使用漸變。見http://jsfiddle.net/C7mc7/。閱讀更多關於CSS3漸變here，並輕鬆創建您自己的here。