#css #rounded-corners
#css #закругленные углы
Вопрос:
Несмотря на то, что я прочитал alistapart — slidingdoors, я застрял.
Вот что я хочу сделать:
Проблема, как вы, возможно, догадались, в середине. Вот как я «разрезал» вкладку на разделы (извините, это некрасиво, но так быстрее объяснить) (зеленый квадрат = div):
Несмотря на то, что она не совместима с IE6-7 (большое спасибо Microsoft), вот что она дает в Firefox, Chrome и Opera:
Теперь я хочу завершить границы слева и справа и закончить закругленными углами внизу (как на первом рисунке). Есть ли у вас какие-либо идеи, как мне следует поступить (и имейте в виду, что я планирую поручить работу другому человеку, задачей которого будет сделать мою работу совместимой с IE 6 и 7)? Я застрял.
[РЕДАКТИРОВАТЬ] После нескольких часов поиска и благодаря помощи «Gaby aka G. Petrioli» (большое-большое спасибо) мне удалось сделать почти все, что я хотел.
Вот что я получаю:
И вот что я хотел бы получить: 
Если у вас есть какие-либо идеи…
Комментарии:
1. Хотя ваши изображения полезны, нам нужно просмотреть ваш HTML / CSS. Также помогла бы демонстрационная версия jsFiddle .
2. jsFissle = ссылка на другие изображения, а мои изображения находятся в моей среде разработки = доступ извне невозможен…
3. Вы можете просто загрузить эти четыре изображения: imgur.com .
4. Сделал это и обновил код здесь jsfiddle.net/uwUwK/37
Ответ №1:
Вы можете сделать это с помощью css и одного изображения для правой части вкладки.
Взгляните на эту демонстрацию http://jsfiddle.net/uwUwK/3 / и добавьте background-image к красному элементу (тому, у которого есть class .tab-separator )
Если бы вы могли использовать другую правую сторону вкладки (менее вытянутую), вам вообще не нужно изображение, демонстрация на http://jsfiddle.net/uwUwK/4
Комментарии:
1. У вас там как-то есть
-webki-border-radius, не то чтобы это имело какое-то значение.2. Спасибо, я обновил изображения здесь jsfiddle.net/SPHnY/7 приближаясь, теперь мне просто нужно, чтобы карта была на той же высоте, что и остальные… CSS так сложен для меня … не разбирайтесь во всем этом беспорядке
3. @OlivierPons, я верю, что это то, чего ты хочешь .. jsfiddle.net/gaby/SPHnY/22
4. @GabyakaG. Петриоли: невероятно! Ты такой хороший! Я просто пытаюсь добавить единственное, чего не хватает: своего рода подсказку… но это перемещает все в неправильном направлении… jsfiddle.net/olivierpons/cuT5Z/1
5. @olivier, ты отменяешь внесенные мной изменения.. Существуют точные расчеты для того, чтобы вкладка перекрывала горизонтальную синюю границу содержимого.. Что касается подсказки , как вы хотите, чтобы это работало?
Ответ №2:
если это должно быть совместимо с IE 6 и 7, единственным способом было бы использовать изображения. Либо в виде одного большого фонового изображения (которое работает, только если высота и ширина не являются динамическими), либо используйте набор изображений (divs с background-image и repeat для границ) для каждой границы и угла.
который тоже мог бы сработать (я нашел его с помощью короткого поиска в Google)http://css3pie.com/Но в зависимости от методов, которые они используют, это может сильно повлиять на производительность ie.
кстати. если вы используете чистый css3, у вас есть border-radius и даже border-image для выполнения таких действий. ( http://www.css3.info/preview/border-image / )