Как сделать угловой интерфейс с вкладками только jquery и css3?

Question

Это моя цель.Угловые вкладки с прозрачностью поверх других.Как бы я построить это без использования jpgs или pngs, а только css?

Answer 1

Это должно быть с CSS, или вы просто надеетесь не использовать растровые изображения? Например, вы можете использовать фоновое изображение SVG, размер файла которого будет меньше размера растрового изображения и будет лучше масштабироваться Вы можете использовать данные URI, если вы беспокоитесь о HTTP-запросах. Вы также можете использовать SVG или png в качестве изображения границы, если не хотите использовать background-image.

Answer 2

Это поможет вам, но я постараюсь сделать что-то за минуту!

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

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

Кстати, отличный вопрос!

Редактировать:

Вот "окончательный" результат:

Посмотреть здесь !

ПРИМЕЧАНИЕ:

Просто знайте, что это «взлом» и что это может быть не самой лучшей идеей для его реализации, я думаю (не могу попробовать сейчас) IE имеет некоторые проблемы с этим, если бы вы спросили о юзабилити и доступности, я бы сказал, пойти с изображениями :)

Answer 3

Я бы хотел использовать CSS для создания углов: http://www.howtocreate.co.uk/tutorials/css/slopes или же http://www.dinnermint.org/blog/css/creating-triangles-in-css/

Вы создаете «конечную» часть вкладки в виде угла белого / черного, а затем используете jquery для применения прозрачности и выделения.

Это должно помочь вам начать без изображений.