分度圓的形式

我試圖創建一個網頁設計和有一個有點奇怪的形式，這樣的事情： enter image description here 分度圓的形式

當1個部分用戶將鼠標懸停在後臺應該只改變：

enter image description here

同爲第二和第三個： enter image description here

希望我清楚......

我不知道應該使用什麼技術才能實現這種效果。任何人都可以幫忙嗎？

來源

2011-04-04 King Julien

我認爲只有正常的div與背景圖片將會很好。你不能用css3 – 2011-04-04 10:41:45

解決這個問題，據我所知，你不能用普通的HTML/CSS來做到這一點。然而，在CSS3中有一些不錯的效果：http://www.css3.info/preview/rounded-border/ – JohnP 2011-04-04 10:42:26

我知道這些天閃光被認爲是骯髒:) – schellmax 2011-04-04 12:48:51

有兩種方式：

使用SVG繪製形狀，與舊的回退IE版本。
使用背景圖像。在正常形狀的divs上。

來源

2011-04-04 10:44:29

可能使用與圖片更換懸停絕對定位的PNG圖像，然後拋出一個長方形的格內有

來源

2011-04-04 10:43:21 Xand94

我將與三個獨立的圖像，每一個與整個背景，一個「選擇」區域走 - 上盤旋div只需更換背景，具有div爲「選擇」了一把。

的JS代碼簡單的例子：

function ReplaceBg(oDiv, num) { 
    oDiv.parentNode.style.backgroundImage = "url(images/background_" + num + ".png)"; 
} 

function RestoreBg(oDiv) { 
    oDiv.parentNode.style.backgroundImage = "url(images/background.png)"; 
}

和HTML：

<div style="background-image: url(images/background.png);"> 
    <div onmouseover="ReplaceBg(this, 1);" onmouseout="RestoreBg(this);">First</div> 
    <div onmouseover="ReplaceBg(this, 2);" onmouseout="RestoreBg(this);">Second</div> 
    <div onmouseover="ReplaceBg(this, 3);" onmouseout="RestoreBg(this);">Third</div> 
</div>

希望的想法是很清楚..

來源

2011-04-04 10:51:15

有一個CSS3語法boreder-radius和你可以用它來做到這一點，但你已經完成了這項工作，我的意思是你已經設置了隨機像素並尋找最適合的工具。例如這裏是 - http://jsfiddle.net/divinemamgai/Ld7He/

也許你應該保持主背景圖片白色的圖像1和3和圖像2使用png 爲基礎的背景圖像，並改變它使用Jquery鼠標懸停並且不要忘記保留圖片2的最高z-index。

希望這可以幫助你。

來源

2011-04-04 10:51:21