環形div

其實我在這裏有兩個問題。我會盡我所能解釋他們。環形div

我正在嘗試創建一個環狀的div。以下是它應該的樣子。

enter image description here

This是我迄今所做的。我怎樣才能得到從左下角到頂部的輕微曲線？我怎樣才能創建倒轉曲線的右側？

謝謝。

來源

2013-01-19 Isuru

這不是一個戒指，看起來像一個環的一部分。 – sevenseacat

您可以添加第二個圓圈，將圖片中您不想看到的部分剔除。

例如，如果您添加第二個div（第一內側）ID爲cutout和風格，如下所示：

#cutout { 
    top:250px; 
    border-radius: 700px; 
    border:300px solid #eee; 
    z-index:1; 
    left:200px; 
    height:200px; 
    position:absolute; 
}

然後在你的形象，你會得到更接近你想要的東西一點點。您還需要將position: relative添加到您的容器格，以確保它的定位和剪裁。最後，如果你想剪輯圖片中顯示的環段，你需要添加一個額外的外部div來剪輯最內層的兩個;你應該用徑向背景替換圖像。

想看看大約類似的：http://dabblet.com/gist/4571882

圖片： css-based-variant

老實說，雖然，我不知道扭曲這樣的工作非常好 - 你通常不會得到正是你想要的結果，而且它很可能不適用於舊版瀏覽器;對於實現這些CSS屬性的較新版本的較新瀏覽器，也不一定是這樣。

來源

2013-01-19 10:12:34

我不知道如何做到這一點，而不是使用彎曲的div。如果您有任何建議，請大家耳聞。再次感謝。 – Isuru

關於透明度：您不能使用透明切口 - div總是*凸出，因此使其看起來好像具有內部曲線的唯一方法是將其放置在具有這種曲線的頂部。 –

替代選擇：使用圖像;使用* svg *圖片（無論如何都支持無處不在的邊框半徑）;使用帶有白色+透明帶的徑向漸變（IE9及更低版本不支持此功能）;使用巨大的畫布和簡單的生成方法。 Svg可能是最好的;帆布很酷，但做起來聽起來更復雜。 –

你可以嘗試創建一個新的div並添加

border-top-right-radius: XXX

爲倒段。確保它們正確地浮動（例如float:left）。

來源

2013-01-19 09:52:23 mavili

回答

相關問題