Как сделать "выкушенные" уголки у прямоугольника?

[MaxWall]

Коллеги!
У меня к вам вопрос - может есть идеи, как можно сделать с помощью css "выкушенные" уголки у прямоугольника со сплошной заливкой?

Т.е. вырезанные вовнутрь со скруглением.

Получается, каждый угол выкусывается сектором прозрачного круга.

 

Как-то так http://joxi.ru/bmoog98HqqdKmy

Надеюсь понятно объяснил головоломку, буду благодарен за ответ )

[Vlad]

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

http://jsfiddle.net/por4mnjo/

[MaxWall]

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

http://jsfiddle.net/por4mnjo/

Влад, огромное спасибо за ответ!

Такой вариант я уже применял раньше - для 4-х углов добавил еще обертку с такой же идеей что спасало меня на однотонном фоне, но дизанер пошел дальше - теперь  нужно сделать чтобы выкушенные углы были прозрачными на любом фоне. Я таки в ночь вот )) нашел одно решение путевое - сделать 4 фона, кадый размером на четверть блока,  фон - круговой градиент от прозрачного к сплошной заливке.

получается неплохо, но в ИЕ 9 не пашет, да и тяжеловесно как-то выглядит.

http://jsfiddle.net/leaverou/EjE7c/light/

 

Может что-то новое тут придумаем ))

 

[Vlad]

Можно пойти другим путём и задействовать clip-path. У меня пока не получилось сделать круглые уголки, но в целом это можно. В IE не работает.

 

http://jsfiddle.net/por4mnjo/2/

 

Есть ещё вариант на jQuery

 

http://malsup.com/jquery/corner/

[rus]

а если это скажем белый выкушенный уголок на не однородном фоне, типа картинки?

[afdw]

Я, конечно, понимаю, что эта информацию практически бесполезна, но всё же, может кто и найдёт: на Хабре публиковалась статья о создании такого блока 4 способами на неоднородном фоне.

 

UPD: Еее! Да! Я нашёл эту статью!

UPD №2: Тьфу, да это же внутренние углы. Но всё равно, может кому пригодится.

Edited May 9, 2015 by afdw

[afdw]

а если это скажем белый выкушенный уголок на не однородном фоне, типа картинки?

http://jsfiddle.net/6rgygj1b/1/

[rus]

http://jsfiddle.net/6rgygj1b/1/

элементов многовато, получается что нельзя обойтись одним дивом без использования картинки в качестве закругления внутрь?

[afdw]

 

http://jsfiddle.net/6rgygj1b/1/

элементов многовато, получается что нельзя обойтись одним дивом без использования картинки в качестве закругления внутрь?

 

Вот так поменьше элементов.

 

 

http://jsfiddle.net/6rgygj1b/1/

элементов многовато, получается что нельзя обойтись одним дивом без использования картинки в качестве закругления внутрь?

 

Вот так поменьше элементов.

 

Вот так ещё меньше.

 

http://jsfiddle.net/6rgygj1b/1/

элементов многовато, получается что нельзя обойтись одним дивом без использования картинки в качестве закругления внутрь?

 

С двумя дивами можно.