Скруглы — border-radius inset для картинок

[@tzlom]

Скруглы напоминают мне о маркетинговом прорыве M$

en.wikipedia.org/wiki/Scroogled

[@impwx]

А border-image не решил бы проблему?

[@tegArt]

Так нужна была не картинка по бортику, а дырки в картинке.

[@GEOgraf]

Кругл — круг+угл
Скругл — снаружи кругл
Вкругл — внутренний кругл

[@mr47]

А SVG чем вам не угодил?

[@tegArt]

Каюсь, я с svg мало знаком, мне было проще то, что описано выше сделать… Пришлите ссылки на примеры вырезания прозрачных дырок в изображениях при помощи svg, чтобы был вариант альтернативного решения.

[@Serator]

Lea Verou проталкивает подобную идею в W3C. Есть и пример реализации как раз на SVG: leaverou.github.io/corner-shape.
+, статья по теме: lea.verou.me/2013/03/preview-border-corner-shape-before-implementations.

[@Serator]

+, lea.verou.me/2013/03/border-corner-shape-is-in-danger-and-you-can-help.

[@tegArt]

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

[@Serator]

lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients — интересное решение подобной задачачи с использованием градиентов в CSS.

[@tegArt]

Я тогда натыкался на этот вариант, но если поменять фон у body — видно, что дырки не прозрачные, т.е. по факту и не дырки вовсе.

[@tegArt]

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

[@tegArt]

Всем сразу никогда не угодить — поэтому и опубликовал свой способ, вдруг кому пригодится. Ваше решение лучше подходит для контента в блоке с однородным фоном, а мое для картинок и сложного фона, который необходимо продырявить. Просто в примере они белые, а поставить то можно любую — и как тогда с box-shadow выкручиваться?

[@tegArt]

Как я вас понимаю ) Согласитесь — проще и удобнее? Хотя, «трансформанимации» вызывают у меня сомнения по поводу удобства произношения.

[@LeonidFrolov]

Для решения с canvas нужно учитывать рендеринг на HiDPI экранах — jondavidjohn.github.io/hidpi-canvas-polyfill — можно использовать полифил, но вариант с SVG лучше, мне кажется. Он проще для рендеринга и полифилы не нужны.