Как сделать такие уголки для фотографии с помощью css?

Question

[charbet]

Как можно добавить такие уголки для фотографии, если есть их картинка в формате png?

Answer 1

[Александр Петров]

<div>
  <ugol_1>
  <ugol_2>
  <ugol_3>
  <ugol_4>
  <img>
</div>

div{
  position: relative;
}
ugol_1{
  position: absolute;
  left: 0px;
  top: 0px;
  background: image;
}

описал схематично. Для каждого угла прописываете где она находится через top,left,right,bottom

Comments

[charbet]

сама пришла к такому же решению. спасибо)

[Александр Петров]

Да не за что)

Answer 2

[George Postoronca]

htmlbook.ru/css/border-image

или через absolute

Comments

[one_day]

через псевдоклассы :before и :after

[charbet]

когда делаю так через border-image

.item img {
  max-width: 100%;
  border: 10px solid black;
  border-image: url('/img/Landing-Page-Border-Details.png') 30 round round;
}

то рамка отображается за картинкой. не знаешь в чем может быть проблема?

[George Postoronca]

да можно и так но можно и 4 блока отдельно

[charbet]

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

[George Postoronca]

charbet: попробуй 4 блока или :after :before

Answer 3

[cssfish]

олдскул метод
https://jsfiddle.net/g49su6bo/