Как сделать скругленные углы css3?

Question

[Дмитрий Евграфович]

Здравствуйте. Можно ли реализовать с помощью стилей подобные уголки?


Пока вижу решение с применением svg-маски, однако на практике поддержка svg неидеальна в старых браузерах (ie8 и младше, opera 12) - как минимум, необходимо подготовить аналогичные картинки в png, но решение делается для магазина и любые изображения должны обрабатываться на лету.

На фоне будет картинка, поэтому простая заливка цветом - не вариант. Нужны именно прозрачные уголки.

Comments

[Дмитрий Евграфович]

webkit-mask-clip также не подходит в виду отсутствия кроссбраузености, хотя может есть его аналоги.

Answer 1

[Vit]

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

Ну так можно на сервере imagemagick-ом при загрузке генерить соответствующие png-шки

Answer 2

[Иван Старков]

тут radial gradient
lea.verou.me/2011/03/beveled-corners-negative-bord...
но при ваших запросах на поддержку ie8 и тп тоже скорее всего не прокатит

Answer 3

[Юрий Лобанов]

jsfiddle.net/leaverou/EjE7c/light
lea.verou.me/2011/03/beveled-corners-negative-bord...

Answer 4

[Crash]

Можно вставить div-ы по углам с соответствующим border-radius и прозрачным фоном

Comments

[Юрий Лобанов]

Вы вопрос-то прочитайте.

[Дмитрий Евграфович]

@iiil @icelaba может я ошибаюсь, но этот способ применим только для монотонной заливки и не подходит, когда в блоке должно лежать изображение.

[Иван Старков]

@Tantacula походу не ошибаетесь, так и есть

[Krickt]

@Bandicoot Где таких разработчиков выращивают?

[Crash]

@shiza36 у меня хотя бы ник более адекватный, чем у вас) Да и поставил же кто-то лайк на мой ответ

[Юрий Лобанов]

@Bandicoot безусловно это говорит о том, что Вы правы.
А если быть точным - о том, что вас тут как минимум двое таких.

[Дмитрий Евграфович]

@iiil раньше хотя бы к орфографии придирались, теперь к никам начали)