Как создать фальшивую вкладку с закругленными углами? - PullRequest
0 голосов
/ 10 ноября 2011

Даже если я прочитал alistapart - раздвижные двери , я застрял.

Вот что я хочу сделать:

what I want to do

Проблема, как вы уже догадались, заключается в середине. Вот как я «разрезал» вкладку «divs» (извините, это некрасиво, но так быстрее объяснить) ( зеленый квадрат = div ):

how i've cut the image

Несмотря на то, что он не совместим с IE6-7 (большое спасибо Microsoft), вот что он дает в Firefox, Chrome и Opera:

here's what it gives under Firefox, Chrome and Opera

Теперь я хочу закончить границы слева и справа и закончить с закругленными углами внизу (как на первом рисунке). Есть ли у вас какие-либо идеи о том, как мне поступить (и имейте в виду, что я планирую передать работу другому человеку, задачей которого будет сделать мою работу совместимой с IE 6 и 7)? Я застрял.

[РЕДАКТИРОВАТЬ] После нескольких часов поиска, и благодаря помощи "Gaby aka G. Petrioli" (большое спасибо), мне удалось сделать почти все, что я хотел.

Вот что я получаю:

almost good

И вот что я хотел бы получить: my goal to reach

Если у вас есть идеи ...

Ответы [ 2 ]

2 голосов
/ 10 ноября 2011

Это можно сделать с помощью css и одного изображения для правой стороны вкладки.

Посмотрите на эту демонстрацию http://jsfiddle.net/uwUwK/3/ и добавьте background-image к красному элементу ( элемент с классом .tab-separator)


Если вы можете использовать другую правую сторону вкладки ( менее вытянутый ), вам вообще не нужно изображение, демонстрация на http://jsfiddle.net/uwUwK/4/

0 голосов
/ 10 ноября 2011

, если он должен быть совместим с IE 6 и 7, единственный способ - использовать изображения. Либо как одно большое фоновое изображение (которое работает только в том случае, если высота и ширина не являются динамическими), либо используйте набор изображений (div с background-image и повторите для границ) для каждой границы и угла.

, который тоже может работать (я нашел его с помощью короткого поиска в Google): http://css3pie.com/ Но в зависимости от методов, которые они используют, это может сильно повлиять на производительность.

кстати. если вы используете чистый css3, у вас есть border-radius и даже border-image для таких вещей. (http://www.css3.info/preview/border-image/)

...