CSS3文件選項卡與插圖角落的底部

-1

嗨，

誰能幫我創造CSS3下面提到的設計。我嘗試了以下屬性，但還是有這個問題得到確切的設計

background:#c6d92d; 
height: 5em; 
width: 20em; 
-moz-border-radius: 1em 4em 1em 4em; 
border-radius: 5em 5em 1em 1em; 
padding:20px;

感謝

2012-05-24 Mujahid

底部的插入曲線讓我相信你需要多個元素來重現這一點。 – MetalFrog

@MetalFrog：你會如何命名這個形狀？這個問題的新標題會很有用。 –

它有點像文件選項卡，所以也許可以幫助「沿着底部插入角落的CSS3文件選項卡」行嗎？梯形與邊緣喇叭？我確定這個特定的曲線類型有一個術語，但我不知道它是否在我頭頂。 – MetalFrog

你需要不止一個div來實現這一目標。

您必須將另外兩個div（一個在左邊，一個在右邊）白色，半徑超過黑色背景。

這是我在我的網站上實現的效果：http://dystroy.org/re7210/（點擊「Toutes les recettes」）。

你像這樣做：

 _________ 
    /  \ 
div C | div A | div B 
    /   \

C和B是白色的div覆蓋具有黑色背景（這是可見僅在邊界半徑不爲0）細胞的100％。

在這種情況下，在主要的一個右側的div有這樣的CSS：

#divB { 
background-color: white; 
border-radius: 0 0 0 10px; 
}

這是我的最終效果：

enter image description here

這是我的「DIVB」，這應該使我明白白色和黑色之間的區域：

enter image description here

（正如你看到的，我發現更容易編寫這一切都使用同一個表，但你也許可以做到這一點不表）

2012-05-24 13:49:37

實際上，這可能是一個使用CSS3的單個div元素，我正在使用一個可以支持IE瀏覽器的庫。 – Mujahid

許多人會學習一個新的東西，如果你只能使用一個div ... –

@Mujahid公平地說，如果你能夠用一個元素做到這一點，而且你知道你可以做到這一點，在Stack Overflow上打開一個問題。 – MetalFrog

你正在尋找的屬性包括： border-top-left-radius和border-top-right-radius
http://www.css3.info/preview/rounded-border/

2012-05-24 13:52:10 Rob

但是當我設置'border-radius：5em 5em 1em 1em'時，這會設置左上角和右上角的半徑5em嗎？無論如何，我會嘗試 – Mujahid

他已經使用邊界半徑來設置左上角和右上角 –

是的，我讀得太快了。我也沒有注意到他的底部有相反的方向。 – Rob

回答