Как сделать пару элементов из макета psd?

Question

[Сергей Гордеенков]

Доброго времени суток.

Есть макет

Как лучше сделать вот такую ребристую рамку?

Как сделать элемент с прозрачным отверстием ?
Приходит в голову только как png-картинку. А есть ли варианты без загрузки картинки с сервера? Пробовал clip-path, но он наоборот оставляет видимым то, что находится внутри выбранной области.

Comments

[Максим]

на svg можно такую дырку сделать ...либо из psd вырезать

[Павел Куценко]

В Brackets очень просто делается все это. Советую пользоваться им. С PSD макета можно сразу верстать

[Aleksey Solovyev]

Павел Куценко, Вы, наверно, ведущий специалист в свой фирме)

[Сергей Гордеенков]

Максим Ленский, спасибо, а можно ссылку на какой-нибудь туториал по вырезанию с помощью svg?

Answer 1

[Aleksey Solovyev]

Сторону можно сделать через :after с бекграундом в виде треугольника и repeat-x(или svg)
А эффект "дырки" вроде называется knockout можно поискать в google(там используется background-clip и mix-blend-mode), но тут я бы сделал через svg

Comments

[Сергей Гордеенков]

спасибо за ответ.
бекграунд-треугольник, это в смысле в виде картинки?
в итоге сделал с помощью linear-gradient, как учат здесь

а можно ссылку на какой-нибудь туториал по вырезанию с помощью svg? примеры в гугле нашёл, но там такая куча новых для меня тегов и атрибутов, с ходу не разобраться :(

[Aleksey Solovyev]

seeep1337, что-то такое я и имел ввиду.
Все туториалы будут с кучей новых свойств пока Вы не узнаете о них. У css-tricks доходчиво объясняли(вроде) - https://css-tricks.com/how-to-do-knockout-text/

Вот накидал как без "хлопот" вырезать кнопку - https://jsfiddle.net/ar9vq433/1/ . Можно и так сделать)

[Сергей Гордеенков]

Aleksey Solovyev, огромная благодарность