CSS - верхний левый угол фонового изображения (изогнутый)

Question

Я сейчас создаю сайт здесь . А справа находится раздел поиска по почтовому индексу. Верхний угол должен быть закруглен.

Я использую изображения для скругления углов. Я не хочу использовать другой метод, если он не полностью поддерживает все браузеры, вплоть до IE7.

Я уже сделал это в навигации (слева. Только верхний правый и нижний левый углы) Но я не могу заставить его работать в верхнем левом углу. Пожалуйста помоги. Это может быть глупой маленькой ошибкой, которую я сделал.

Answer 1

Если «индекс поиска по почтовому индексу» фиксирован width и height (как кажется), простейшим решением будет просто сделать все это как изображение, и установить его как background :

(да, изображения правильного размера и цвета)

Answer 2

Проблема в том, что ваш цвет фона покрывает ваше изображение. Если вы удалите свойство background-color, вы увидите угловое изображение.

Возьмите свое изображение http://molossi.psm2.co.uk/assets/images/li-bg-tl.png и добавьте к нему серый фон. Установите ширину и высоту всего серого элемента фона на 225x120 или на все, что вы хотите, и вам будет хорошо. В основном перейдите от углового изображения к полному изображению.

Если вы не хотите делать это таким образом, возьмите свое угловое изображение и сделайте его длиной 225 пикселей с серым, растянувшимся до конца.

Answer 3

Существует два метода создания закругленных углов без использования border-radius (CSS3) и без использования изображений:

1. Используйте четыре маленьких div с height: 1px и постепенно увеличивающейся ширины, которые создают иллюзию круглого угла. Это, наверное, лучший вариант. Пример кода см. На следующем сайте: http://webdesign.about.com/od/css/a/aa072406.htm

2. Используйте файл HTA и взлом браузера. Я никогда не пробовал это лично. Для примеров кода и методов, см. Следующий сайт http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

Answer 4

Для старых браузеров поддержка изображений является лучшим и, вероятно, единственным вариантом.Если вы не возражаете против более низких уровней поддержки браузера CSS3 Rounded Corners (на странице границ CSS3 W3Schools), возможно, ваш ответ.

Надеюсь, это поможет.