Как вырезать край фото средствами css?

Question

[Иван Дамаскин]

Всем привет.
Как добиться такого эффекта?

из этого фото?


Я сделал вот так https://jsfiddle.net/33jyq4rq/1/ но проблема в том что под этой картинкой есть фон, и красный цвет надо просто убрать и что бы под ним был фон, вот это и не получается сделать -( по сути красные бордюры должны вырезать мою картинку что бы получилось то что нужно, но они лишь покрывают ее поверх

Answer 1

[Дмитрий]

как вариант https://jsfiddle.net/kv8a15u0/

Comments

[Сергей Горячев]

FF 48 не работает. Так что сомнительный способ.

[Иван Дамаскин]

хорошее решение, но к сожалению на FF как сказал Сергей действительно не работает -(

[Danila]

Иван Дамаскин: лучше так, чем придумывать костыль. И то, что в фф он будет отображаться без вырезанного края нет ничего страшного, сайт от этого не сломается.

Answer 2

[Сергей Горячев]

Только картинкой.
Ну или рисуйте фигуру на канвас.

Answer 3

[stasov1]

Если кроссбраузреность вообще не нужна, то можно посмотреть в сторону clip-path (htmlbook.ru/blog/maskirovanie-v-css). Или же можно очень сильно напрячься и сделать это с помощью трех блоков и фоновой картинки

<div class="wrapper">
  <div class="top"></div>
  <div class="bottom"></div>
</div>

.wrapper задать ширину, высоту и overflow hiddne. А блокам .top и .bottom задать 50% высоты родительского блока и спозиционировать их, задать им в качестве фона эту картинку и спозиционировать фон и transform scew.

И самый простой вариант - это просто вырезать из макета картинку сразу такой формы.

Answer 4

[Андрей]

оно?
https://jsfiddle.net/dtscfd5g/1/

Comments

[Иван Дамаскин]

дада, есть такое решение, только вот оно не кросбраузерно, в FF 48 не работает к сожалению -(