自定義形狀垂直滑塊

Question

我必須製作一個燈泡形狀（即使是橢圓形也可以）的垂直滑塊原型。我開始使用http://jqueryui.com/demos/slider/slider-vertical.html並將父元素的形狀更改爲所需（現在的橢圓形）形狀。問題是，當我拖動滑塊時，它以矩形方式生長，因此不會採用橢圓形狀（因爲它是父元素）。 你可以請建議，如果有更好的方法來實現這一點。如果這是正確的方法，那麼我應該如何遮擋邊緣的顏色以便使滑塊背景也是橢圓的。

供參考的問題：http://share.axure.com/UMILTD/

Answer 1

我會建議實現與border-radius CSS屬性這種效果。您可以設置父級的border-radius以創建形狀，然後將它的overflow設置爲hidden，以使其後面的矩形不顯示。

我在這裏有一個生動的例子 - http://jsfiddle.net/qUbZf/3/。 Chrome在處理溢出的方式上似乎存在一些問題，但在Firefox和IE9中看起來很好。

IE < 9不支持border-radius，但形狀將簡單回落到一個盒子，並仍然可用。