Как визуализировать углы вокруг изображения <img> средствами CSS?

#html #css #wordpress #вёрстка #img

Недавно захотел обновить сайт на WordPress, да в CSS не сильно силён. Решил добавить
к изображениям рамку в виде углов, но не нашёл решения, как можно это реализовать.
Пробовал что-то сделать с border, но он обводит картинку целиком, а обводку на половину
настроить как я понял, нельзя.

Есть варианты того, как это можно реализовать средствами CSS? Или для такого придётся
использовать JS?


    

Ответы

Ответ 1

Вот пример с linear-gradient:



div {
  width: 20vw;
  height: 20vw;
  margin: auto;
  background-color: rgba(0, 0, 0, .1);
  background-image: linear-gradient(red 5vw, transparent 5vw, transparent 15vw, red
15vw), linear-gradient(90deg, red 5vw, transparent 5vw, transparent 15vw, red 15vw),
linear-gradient(red 5vw, transparent 5vw, transparent 15vw, red 15vw), linear-gradient(90deg,
red 5vw, transparent 5vw, transparent 15vw, red 15vw);
  background-size: 5px 20vw, 20vw 5px, 5px 20vw, 20vw 5px;
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}



Ответ 2

Кароче, пока не нашёл варианта лучше, как поставить изображение, и подогнать его
под размер фото. Однако выходит не совсем то что хотелось, но хотя бы что-то.



img {
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
  border: 15px solid #000000;
  border-image: url('https://dl.dropbox.com/s/0gnnj2n8988t2lv/obvodk.png') 34% repeat;
}