Sadece jquery ve css3 ile açılı bir sekme arayüzünü nasıl yapabilirim?

Question

Bu benim amacım. Saydamlıklı açılı sekmeler, diğerinin üstünde. Bunu jpgs veya png kullanmadan nasıl oluşturabilirim, ama sadece css?

Answer 1

Bu tuts Gidiyor alacak ama bir dakika içinde bir şey mockup çalışacağım!

http://www.howtocreate.co.uk/tutorials/css/slopes

http://net.tutsplus.com/articles/news/fun-with-css-shapes/

BTW harika bir soru!

Düzenleme:

it here bakınız: Burada

"nihai" sonucudur!

NOT:

Sadece bu IE bu bazı sorunları olan bir "hack" ve iyi bir fikir aslında bunu uygulamaya olmayabilir, ben (şimdi deneyin olamaz) düşünmek olduğunu unutmayın Eğer kullanılabilirlik ve erişilebilirlik sorsaydı, ben görüntüleri :) ile gitmek söyleyebilirim

Answer 2

bu almak benim açıları oluşturmak için CSS kullanmak olacaktır: sen 'sonu' oluşturmak http://www.howtocreate.co.uk/tutorials/css/slopes veya http://www.dinnermint.org/blog/css/creating-triangles-in-css/

beyaz/bl olan bir açı olarak sekmenin parçası ack, sonra şeffaflık ve seçim uygulamak için jquery kullanın.

Bu, resim olmadan başlamanıza yardımcı olur.

Answer 3

CSS ile mi olmalı yoksa sadece raster görüntüleri kullanmamaya mı çalışıyorsunuz? Örneğin, raster bir görüntüden daha küçük bir dosya boyutu olacak ve daha iyi ölçeklenebilecek bir SVG arka plan resmi kullanabilirsiniz. HTTP istekleri konusunda endişeleniyorsanız bir veri uri kullanabilirsiniz. Arka plan görüntüsünü kullanmak istemiyorsanız, muhtemelen bir SVG veya png'yi kenarlık resmi olarak da kullanabilirsiniz.