Comments 20
А border-image не решил бы проблему?
Кругл — круг+угл
Скругл — снаружи кругл
Вкругл — внутренний кругл
Скругл — снаружи кругл
Вкругл — внутренний кругл
А SVG чем вам не угодил?
Каюсь, я с svg мало знаком, мне было проще то, что описано выше сделать… Пришлите ссылки на примеры вырезания прозрачных дырок в изображениях при помощи svg, чтобы был вариант альтернативного решения.
Lea Verou проталкивает подобную идею в W3C. Есть и пример реализации как раз на SVG: leaverou.github.io/corner-shape.
+, статья по теме: lea.verou.me/2013/03/preview-border-corner-shape-before-implementations.
+, статья по теме: lea.verou.me/2013/03/preview-border-corner-shape-before-implementations.
lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients — интересное решение подобной задачачи с использованием градиентов в CSS.
UFO just landed and posted this here
Я тогда натыкался на этот вариант, но если поменять фон у body — видно, что дырки не прозрачные, т.е. по факту и не дырки вовсе.
UFO just landed and posted this here
Как вариант, но тут разные радиусы у скруглов сделать не получится + нужно изначально знать точные размеры блока.
UFO just landed and posted this here
Всем сразу никогда не угодить — поэтому и опубликовал свой способ, вдруг кому пригодится. Ваше решение лучше подходит для контента в блоке с однородным фоном, а мое для картинок и сложного фона, который необходимо продырявить. Просто в примере они белые, а поставить то можно любую — и как тогда с box-shadow выкручиваться?
UFO just landed and posted this here
Для решения с canvas нужно учитывать рендеринг на HiDPI экранах — jondavidjohn.github.io/hidpi-canvas-polyfill — можно использовать полифил, но вариант с SVG лучше, мне кажется. Он проще для рендеринга и полифилы не нужны.
Sign up to leave a comment.
Скруглы — border-radius inset для картинок