Как вырезать уголки у блока div?

Question

[▪ ▪]

Привет. Хотел узнать можно ли методом css вырезать уголки в блоке div, как показано на рисунке? Или для такого варианта подойдет только старый способ с картинками?

Answer 1

[tef]

Через радиальный градиент.
jsfiddle.net/z3my1cfg

Comments

[▪ ▪]

А эти радиальные градиенты поддерживают мобильные устройства? Проверил на ie9, всё работает. Удивительно.

Answer 2

[Дмитрий]

приблизительно так

jsfiddle.net/soledar10/9pvfacLv

или так

jsfiddle.net/soledar10/c4msLnwa

или еще так

jsfiddle.net/soledar10/mms48q2v

Comments

[▪ ▪]

Интересное решение, но хотелось бы чтобы уголки были прозрачные.

Answer 3

[Kovalsky]

Есть такая фишка - border-corner-shape, правда ее кажется все-таки выпилили из спек. Вот Lea Verou рассказывает о ней. А вот демка тоже от Lea Verou, в коде увидите, как у нее через SVG реализованы эти уголки.

Вот тут тоже чувак спрашивает как сделать уголки, через border-corner-shape, ему отвечают что этого пока нет в спеках и предлагают рабочие варианты )

Answer 4

[Павел Радьков]

Можно сделать через border-image: картинка цвета фона с прозрачными сегментами в уголках. И с помощью border-image-outset отрегулировать соприкосновение бордера и фона.
Это «новый» способ, но всё же с картинками.